import { useState } from "react";
import { INK, RED, SKY, MUTE, FONT_MONO } from "../../theme";
import { PRIVACY_VERSION } from "../../constants";
import { PrivacyText } from "../privacy/PrivacyDialog";
import DataSection from "../profile/DataSection";

/*
 * Toestemmingsvraag voor een bestaand account zonder consent_at (van vóór de privacyverklaring,
 * of na een wezenlijke wijziging ervan). Blokkeert de app tot de gebruiker akkoord gaat — of
 * juist niet: dan kan hij hier zijn gegevens opvragen en zijn account verwijderen (DataSection),
 * of uitloggen. onConsent() → Promise<me>; onExport/onDelete/onLogout als in ProfileEditor.
 */
export default function ConsentView({ me, onConsent, onExport, onDelete, onLogout }) {
  const [checked, setChecked] = useState(false);
  const [state, setState] = useState({ busy: false, error: null });

  const agree = async () => {
    setState({ busy: true, error: null });
    try {
      await onConsent();
    } catch (e) {
      setState({ busy: false, error: e.message });
    }
  };

  return (
    <main className="app-main">
      <h2 style={{ margin: "0 0 4px", fontSize: 22 }}>Even je akkoord, {me.name}</h2>
      <p style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE, margin: "0 0 14px" }}>
        privacyverklaring van {PRIVACY_VERSION}
      </p>
      <p style={{ background: SKY, border: `1px solid ${INK}`, padding: "10px 12px", fontSize: 14, margin: "0 0 16px", lineHeight: 1.5 }}>
        Liefdesbrieven verwerkt gevoelige gegevens over je — gender, trans-status, relatiestatus en wat je zoekt. Daar
        hebben we je uitdrukkelijke toestemming voor nodig, en die hebben we nog niet vastgelegd. Lees hieronder wat we
        bewaren en waarom; daarna kun je verder.
      </p>

      <div style={{ maxHeight: "40vh", overflowY: "auto", border: `2px solid ${INK}`, padding: "4px 14px 10px", marginBottom: 16 }}>
        <PrivacyText />
      </div>

      <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5, marginBottom: 14 }}>
        <input type="checkbox" checked={checked} onChange={(e) => setChecked(e.target.checked)} style={{ marginTop: 4, flexShrink: 0 }} />
        <span>
          Ik geef toestemming om mijn gender, trans-status, relatiestatus en wat ik zoek te verwerken om me te matchen,
          en ik heb de privacyverklaring gelezen.
        </span>
      </label>
      <button
        onClick={agree}
        disabled={!checked || state.busy}
        style={{
          width: "100%", padding: "14px 0", fontSize: 16, fontWeight: 700, border: "none",
          background: checked && !state.busy ? RED : SKY, color: checked && !state.busy ? "#fff" : MUTE,
        }}
      >
        {state.busy ? "Even geduld…" : "Akkoord, verder →"}
      </button>
      {state.error && (
        <p role="alert" style={{ fontFamily: FONT_MONO, fontSize: 12, color: RED, margin: "10px 0 0" }}>fout: {state.error}</p>
      )}

      <div style={{ marginTop: 28, paddingTop: 16, borderTop: `1px solid ${SKY}` }}>
        <p style={{ fontSize: 14, fontWeight: 700, margin: "0 0 4px" }}>Liever niet?</p>
        <p style={{ fontSize: 13, color: MUTE, margin: "0 0 10px", lineHeight: 1.5 }}>
          Zonder toestemming kunnen we je niet matchen, dus dan kan de app niet verder. Je kunt hieronder wel alles
          opvragen wat we van je hebben en je account verwijderen — of gewoon{" "}
          <button onClick={onLogout} style={{ background: "none", border: "none", color: INK, fontWeight: 700, fontSize: 13, padding: 0, textDecoration: "underline" }}>
            uitloggen
          </button>{" "}
          en er later over nadenken.
        </p>
      </div>
      <DataSection email={me.email} onExport={onExport} onDelete={onDelete} />
    </main>
  );
}