'use client';

import { Button } from '@/components/ui/button';
import { apiUrl } from '@/lib/api';
import Link from 'next/link';
import { useState } from 'react';

export default function AccountPage() {
  const [downloading, setDownloading] = useState(false);

  async function downloadExport() {
    setDownloading(true);
    try {
      // Trigger a same-origin attachment download. The cookie ships with the
      // request because we're same-credentials with the API origin via CORS.
      window.location.href = apiUrl('/v1/account/export');
    } finally {
      setTimeout(() => setDownloading(false), 1500);
    }
  }

  return (
    <div className="mx-auto max-w-3xl px-6 py-10">
      <h1 className="text-[22px] font-semibold tracking-tight">Account</h1>
      <p className="mt-1 text-[13px] text-[--color-fg-muted]">
        Your data, your rights. Swiss DSG Art. 25 / GDPR Art. 15 + 20.
      </p>

      <div className="mt-8 space-y-4">
        <section className="panel p-5">
          <h2 className="text-[14px] font-semibold tracking-tight">Download your data</h2>
          <p className="mt-2 text-[12.5px] leading-relaxed text-[--color-fg-muted]">
            One JSON file with everything we hold for your account: profile, organization, MCP
            servers, build history (last 1000 entries), audit log (last 1000 events) and your
            support-ticket history. Excludes password hashes, encrypted secrets and other
            users&apos; data.
          </p>
          <div className="mt-4">
            <Button variant="primary" size="md" onClick={downloadExport} disabled={downloading}>
              {downloading ? 'Preparing…' : 'Download .json'}
            </Button>
          </div>
        </section>

        <section className="panel p-5">
          <h2 className="text-[14px] font-semibold tracking-tight">Delete account</h2>
          <p className="mt-2 text-[12.5px] leading-relaxed text-[--color-fg-muted]">
            We don&apos;t do one-click account deletion yet — too easy to fat-finger and lose
            paid-tier server configs. Open a ticket and we&apos;ll wipe everything within 30
            days (servers, secrets, audit, tickets) per Swiss DSG Art. 32 / GDPR Art. 17.
          </p>
          <div className="mt-4">
            <Link href="/settings/support">
              <Button variant="secondary" size="md">
                Open deletion ticket
              </Button>
            </Link>
          </div>
        </section>

        <section className="panel p-5">
          <h2 className="text-[14px] font-semibold tracking-tight">Cookies on this site</h2>
          <p className="mt-2 text-[12.5px] leading-relaxed text-[--color-fg-muted]">
            We use only strictly-necessary cookies: a session cookie (
            <span className="mono">bmm_session</span>, httpOnly, 30 days) and a short-lived
            OAuth-CSRF state cookie (<span className="mono">bmm_oauth_state</span>, 10 minutes
            during a third-party login flow). No analytics, no tracking, no third-party cookies on
            this domain.
          </p>
        </section>
      </div>

      <div className="mt-10 text-[12px] text-[--color-fg-subtle]">
        <Link href="/privacy" className="hover:text-[--color-fg]">
          ← Privacy policy
        </Link>
      </div>
    </div>
  );
}