import { useAnalyticsConsent } from "../core/privacy/analytics-consent-context";
import { privacyConfig } from "../core/privacy/privacy-config";

function Section({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section className="rounded-[18px] border border-[var(--p-border)] bg-[var(--p-surface)] p-5 md:p-7">
      <h2 className="m-0 font-sans text-xl font-semibold tracking-tight text-[var(--p-text)]">
        {title}
      </h2>
      <div className="mt-4 space-y-3 text-sm leading-relaxed text-[var(--p-muted)]">
        {children}
      </div>
    </section>
  );
}

export function PrivacyPage() {
  const { choice, openSettings } = useAnalyticsConsent();

  return (
    <div className="mx-auto flex max-w-[920px] flex-col gap-6 pb-16 animate-plimi-slide">
      <header className="flex flex-col gap-4">
        <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
          privacy notice & legal information
        </span>
        <h1 className="m-0 font-sans text-4xl font-bold leading-[1.03] tracking-tight text-[var(--p-text)] md:text-[52px]">
          Your tools are local. Analytics are optional.
        </h1>
        <p className="m-0 max-w-[760px] text-base leading-relaxed text-[var(--p-muted)]">
          Effective {privacyConfig.policyEffectiveDate}. This notice explains
          who operates Plimi, what data the website processes, and the choices
          available to you.
        </p>
      </header>

      <Section title="Controller and contact">
        <p className="m-0">
          The data controller is{" "}
          <strong className="text-[var(--p-text)]">
            {privacyConfig.controllerName}
          </strong>
          , based in {privacyConfig.controllerCountry}.
        </p>
        <p className="m-0">
          Privacy requests:{" "}
          <a
            href={`mailto:${privacyConfig.privacyEmail}`}
            className="text-[var(--p-text)] underline underline-offset-4"
          >
            {privacyConfig.privacyEmail}
          </a>
          . Website: {privacyConfig.siteUrl}.
        </p>
      </Section>

      <Section title="Local tool processing">
        <p className="m-0">
          Text, files, images, PDFs, generated passwords, and tool outputs are
          processed by code running in your browser. Plimi does not upload this
          tool content to an application server or include it in analytics.
        </p>
        <p className="m-0">
          Files you download remain under your control. Browser features such
          as the clipboard or local file picker are used only when you invoke
          them.
        </p>
      </Section>

      <Section title="Optional analytics">
        <p className="m-0">
          Analytics are disabled until you consent. If accepted, the site loads{" "}
          {privacyConfig.analyticsProvider} from {privacyConfig.analyticsHost}.
          It may process the visited route, referrer, timestamp, browser,
          operating system, device type, screen size, language, and an
          approximate location derived from network information.
        </p>
        <p className="m-0">
          Purpose: aggregate audience measurement and improvement of Plimi.
          Legal basis: your consent under GDPR Article 6(1)(a). Analytics data
          is configured for a retention period of{" "}
          {privacyConfig.analyticsRetentionMonths} months and is hosted in{" "}
          {privacyConfig.analyticsHostCountry}.
        </p>
        <p className="m-0">
          Plimi does not send tool inputs, uploaded file contents, outputs,
          names, email addresses, or account identifiers to analytics. The
          tracker is configured to exclude URL search parameters and hashes and
          to honor browser Do Not Track.
        </p>
        <div className="flex flex-wrap items-center gap-3 pt-2">
          <button
            onClick={openSettings}
            className="rounded-[10px] bg-[var(--p-accent)] px-4 py-2.5 font-sans text-sm font-semibold text-[var(--p-accent-ink)]"
          >
            Change analytics choice
          </button>
          <span className="font-mono text-[11px] uppercase text-[var(--p-muted)]">
            Current choice: {choice === "granted" ? "accepted" : choice === "denied" ? "rejected" : "not chosen"}
          </span>
        </div>
      </Section>

      <Section title="Local storage and essential preferences">
        <p className="m-0">
          Plimi stores your theme preference and analytics choice in browser
          local storage. These values are necessary to remember the settings
          you selected. Plimi does not use advertising cookies.
        </p>
      </Section>

      <Section title="Recipients and transfers">
        <p className="m-0">
          When analytics are accepted, analytics metadata is received by the
          operator of {privacyConfig.analyticsHost} and any infrastructure
          providers used to host it. The controller must maintain appropriate
          processor agreements and transfer safeguards where a provider
          processes data outside the EEA.
        </p>
      </Section>

      <Section title="Your rights">
        <p className="m-0">
          Depending on applicable law, you may request access, correction,
          deletion, restriction, or portability of your personal data. You may
          withdraw analytics consent at any time through Analytics settings;
          withdrawal does not affect prior lawful processing.
        </p>
        <p className="m-0">
          Contact {privacyConfig.privacyEmail} to exercise a right. You may also
          lodge a complaint with the data-protection authority in your country
          of residence, work, or the place of an alleged infringement.
        </p>
      </Section>

      <Section title="Security and changes">
        <p className="m-0">
          Plimi uses HTTPS and access controls appropriate to the services it
          operates. No internet service can guarantee absolute security. This
          notice may be updated when processing or providers change; the
          effective date above identifies the current version.
        </p>
      </Section>
    </div>
  );
}
