import * as React from "react";
import { addPropertyControls, ControlType } from "framer";

export default function OfferBox(props) {
  const { priceParam, idParam, eligibleParam, currency } = props;

  const [price, setPrice] = React.useState<string | null>(null);
  const [intakeId, setIntakeId] = React.useState<string | null>(null);
  const [eligible, setEligible] = React.useState<string | null>(null);

  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    setPrice(params.get(priceParam));
    setIntakeId(params.get(idParam));
    setEligible(params.get(eligibleParam));
  }, [priceParam, idParam, eligibleParam]);

  // Kein Angebot / falscher Link
  if (!price && eligible !== "false") {
    return (
      <div style={boxStyle}>
        <div style={titleStyle}>Kein Angebot gefunden</div>
        <div style={subStyle}>Bitte gehe über den Ankauf-Prozess, damit wir dein Angebot berechnen können.</div>
      </div>
    );
  }

  // Nicht ankauffähig
  if (eligible === "false") {
    return (
      <div style={boxStyle}>
        <div style={titleStyle}>Leider kein Ankauf möglich</div>
        <div style={subStyle}>Dein Gerät passt aktuell nicht zu unseren Ankaufkriterien.</div>
        {intakeId ? <div style={idStyle}>Referenz: {intakeId}</div> : null}
      </div>
    );
  }

  // Erfolgsfall
  return (
    <div style={boxStyle}>
      <div style={titleStyle}>Dein Angebot</div>
      <div style={priceStyle}>
        {price} {currency}
      </div>
      {intakeId ? <div style={idStyle}>Referenz: {intakeId}</div> : null}
    </div>
  );
}

// Styles (minimal, clean)
const boxStyle: React.CSSProperties = {
  padding: 24,
  borderRadius: 16,
  border: "1px solid rgba(0,0,0,0.08)",
  background: "white",
  width: "100%",
  boxSizing: "border-box",
};

const titleStyle: React.CSSProperties = {
  fontSize: 16,
  opacity: 0.75,
  marginBottom: 8,
  fontWeight: 600,
};

const priceStyle: React.CSSProperties = {
  fontSize: 40,
  fontWeight: 800,
  letterSpacing: "-0.02em",
  marginBottom: 10,
};

const subStyle: React.CSSProperties = {
  fontSize: 14,
  opacity: 0.75,
};

const idStyle: React.CSSProperties = {
  marginTop: 12,
  fontSize: 12,
  opacity: 0.6,
};

// Controls (damit du Param-Namen flexibel setzen kannst)
addPropertyControls(OfferBox, {
  priceParam: { type: ControlType.String, title: "Price Param", defaultValue: "price" },
  idParam: { type: ControlType.String, title: "ID Param", defaultValue: "intake_id" },
  eligibleParam: { type: ControlType.String, title: "Eligible Param", defaultValue: "eligible" },
  currency: { type: ControlType.String, title: "Currency", defaultValue: "€" },
});