import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, CreditCard } from "lucide-react";

import { SettingsSection } from "@/components/settings/SettingsSection";
import { AccountForm } from "@/components/settings/AccountForm";
import { OrganizationForm } from "@/components/settings/OrganizationForm";
import { SignatureForm } from "@/components/settings/SignatureForm";
import { DangerZone } from "@/components/settings/DangerZone";
import { DemoToggle } from "@/components/demo/DemoToggle";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { useSubscription } from "@/lib/billing";

export const Route = createFileRoute("/_app/parametres")({
  component: ParametresPage,
});

/**
 * /parametres — l'utilisateur édite ce qu'il avait rempli à l'onboarding,
 * sa signature, et accède à la zone danger (logout + suppression compte).
 *
 * Layout choisi : sections verticales (pas tabs ni sidebar internes), pour
 * un flow de scroll naturel — V1 mono-utilisateur, peu de surface, ça se
 * lit mieux d'un seul jet. La sidebar/tabs viendront quand on aura
 * "Facturation", "Équipe", "Notifications", "API tokens"… (V2).
 *
 * Chaque section a son propre form avec son propre Save button → clarté
 * du blast radius (modifier sa signature ne sauvegarde pas l'org, etc.).
 */
function ParametresPage() {
  const { data: sub } = useSubscription();
  const planLabel = sub?.plan === "pro" ? "Pro" : sub?.plan === "business" ? "Business" : "Free";

  return (
    <div className="flex flex-col gap-2">
      <header className="mb-4">
        <h1 className="font-display text-[28px] font-bold tracking-[-0.022em] text-ink lg:text-[32px]">
          Paramètres
        </h1>
        <p className="mt-1.5 text-[14px] text-ink-3">
          Compte, entreprise, signature email — modifiables à tout moment.
        </p>
      </header>

      <div className="flex flex-col gap-10 lg:gap-12">
        <SettingsSection
          eyebrow="Compte"
          title="Vos infos personnelles"
          description="Le nom et l'email qui vous identifient dans Rubis. L'email sert d'identifiant de connexion et d'expéditeur des relances."
        >
          <AccountForm />
        </SettingsSection>

        <SettingsSection
          eyebrow="Entreprise"
          title="Votre structure"
          description="Le nom apparaît dans tous les emails de relance. Le SIRET est nécessaire pour les mises en demeure formelles."
        >
          <OrganizationForm />
        </SettingsSection>

        <SettingsSection
          eyebrow="Signature"
          title={
            <>
              Comment vous <em className="text-rubis">signez</em>
            </>
          }
          description="Apposée à la fin de chaque relance que Rubis envoie pour vous. Cinq lignes max, ton sobre — c'est l'image qu'on laisse à votre client."
        >
          <SignatureForm />
        </SettingsSection>

        <SettingsSection
          eyebrow="Abonnement"
          title={
            <>
              Plan & <em className="text-rubis">facturation</em>
            </>
          }
          description="Votre plan courant, votre limite de factures actives, et l'accès au portail Stripe pour gérer la CB et l'annulation."
        >
          <Card padding="md" className="flex items-center justify-between gap-4 flex-wrap">
            <div>
              <p className="text-[10.5px] uppercase tracking-[0.12em] text-rubis font-semibold">
                Plan actuel
              </p>
              <p className="mt-1 font-display text-[18px] font-bold text-ink">
                Rubis {planLabel}
                {sub?.inGracePeriod && (
                  <span className="ml-2 text-[11px] font-medium text-rubis-deep uppercase tracking-[0.1em]">
                    · 3 mois offerts
                  </span>
                )}
              </p>
            </div>
            <Button size="sm" variant="secondary" asChild>
              <Link to="/parametres/abonnement">
                <CreditCard size={14} aria-hidden="true" />
                Gérer l'abonnement
                <ArrowRight size={13} aria-hidden="true" />
              </Link>
            </Button>
          </Card>
        </SettingsSection>

        <SettingsSection
          eyebrow="Démonstration"
          title={
            <>
              Faire vivre Rubis en <em className="text-rubis">accéléré</em>
            </>
          }
          description="Mode démo : horloge virtuelle qui avance dans le temps, emails capturés au lieu d'être envoyés à de vrais clients. Idéal pour montrer Rubis à un prospect."
        >
          <DemoToggle />
        </SettingsSection>

        <SettingsSection
          eyebrow="Zone danger"
          title="Déconnexion et compte"
          description="Sortir de Rubis sur cet appareil ou supprimer définitivement votre compte (RGPD)."
          tone="danger"
        >
          <DangerZone />
        </SettingsSection>
      </div>
    </div>
  );
}
