import { Building2, Save, FileText, Upload } from "@/components/ui/icons";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { BRAND_NAME } from "@/lib/brand";

export default function AgencyBillingPage() {
  return (
    <div className="space-y-6">
      <Panel className="border-accent/20 bg-accent/[0.03]">
        <div className="px-6 py-5 flex items-start gap-4">
          <span className="size-10 shrink-0 rounded-md bg-accent/15 border border-accent/40 flex items-center justify-center text-accent">
            <FileText className="size-5" />
          </span>
          <div className="flex-1">
            <h3 className="text-sm font-semibold text-text">Données légales de {BRAND_NAME}</h3>
            <p className="mt-1.5 text-sm text-text-muted leading-relaxed max-w-3xl">
              Ces informations apparaissent sur toutes les factures émises à vos clients et sur les
              mentions légales de leur portail. Vérifiez-les au moins une fois par an.
            </p>
          </div>
        </div>
      </Panel>

      {/* Identité de l'entreprise */}
      <Panel>
        <PanelHeader title="Identité de l'entreprise" subtitle="Nom légal, statut, registre du commerce" />
        <div className="px-6 py-6 grid grid-cols-1 md:grid-cols-2 gap-5">
          <Field id="legalName" label="Raison sociale">
            <Input type="text" defaultValue={`${BRAND_NAME} SAS`} />
          </Field>
          <Field id="legalForm" label="Forme juridique">
            <Input type="text" defaultValue="Société par actions simplifiée" />
          </Field>
          <Field id="siren" label="SIREN">
            <Input type="text" defaultValue="912 345 678" />
          </Field>
          <Field id="siret" label="SIRET (siège)">
            <Input type="text" defaultValue="912 345 678 00012" />
          </Field>
          <Field id="vat" label="N° TVA intracommunautaire">
            <Input type="text" defaultValue="FR42 912345678" />
          </Field>
          <Field id="ape" label="Code APE">
            <Input type="text" defaultValue="6201Z · Programmation informatique" />
          </Field>
          <Field id="capital" label="Capital social">
            <Input type="text" defaultValue="10 000 €" />
          </Field>
          <Field id="rcs" label="RCS">
            <Input type="text" defaultValue="Paris" />
          </Field>
        </div>
        <div className="px-6 py-4 border-t border-border bg-stone-900/[0.02] flex justify-end">
          <Button variant="primary" size="sm">
            <Save className="size-3.5" />
            Enregistrer
          </Button>
        </div>
      </Panel>

      {/* Adresse */}
      <Panel>
        <PanelHeader title="Adresse du siège social" />
        <div className="px-6 py-6 grid grid-cols-1 md:grid-cols-3 gap-5">
          <Field id="addr1" label="Adresse" className="md:col-span-3">
            <Input type="text" placeholder="Rue, avenue, voie…" autoComplete="address-line1" />
          </Field>
          <Field id="postalCode" label="Code postal">
            <Input type="text" placeholder="75008" autoComplete="postal-code" />
          </Field>
          <Field id="city" label="Ville" className="md:col-span-2">
            <Input type="text" placeholder="Paris" autoComplete="address-level2" />
          </Field>
        </div>
      </Panel>

      {/* Coordonnées bancaires */}
      <Panel>
        <PanelHeader
          title="Coordonnées bancaires"
          subtitle="Compte sur lequel sont versés les paiements clients (via Stripe)"
        />
        <div className="px-6 py-6 grid grid-cols-1 md:grid-cols-2 gap-5">
          <Field id="bank" label="Banque">
            <Input type="text" defaultValue="Qonto" />
          </Field>
          <Field id="iban" label="IBAN">
            <Input type="text" defaultValue="FR76 1014 0000 1234 5678 9012 345" />
          </Field>
          <Field id="bic" label="BIC / SWIFT">
            <Input type="text" defaultValue="QNTOFRP1XXX" />
          </Field>
        </div>
      </Panel>

      {/* Contact & logo factures */}
      <Panel>
        <PanelHeader
          title="Apparence des factures"
          subtitle="Personnalisation visuelle des PDF envoyés à vos clients"
        />
        <div className="px-6 py-6 space-y-5">
          <div>
            <label className="text-xxs uppercase tracking-wider font-semibold text-text-dim mb-2 block">
              Logo (apparaît en en-tête des factures)
            </label>
            <div className="flex items-center gap-4">
              <div className="size-20 rounded-md border border-dashed border-border bg-stone-900/[0.03] flex items-center justify-center text-text-faint">
                <Building2 className="size-7" />
              </div>
              <div className="flex-1">
                <Button variant="outline" size="sm">
                  <Upload className="size-3.5" />
                  Téléverser un logo
                </Button>
                <p className="mt-2 text-xs text-text-faint">
                  PNG ou SVG, fond transparent recommandé. Max 2 Mo.
                </p>
              </div>
            </div>
          </div>

          <Field id="invoiceFooter" label="Mentions de pied de facture">
            <Input
              type="text"
              defaultValue="Pénalités de retard : 3 fois le taux d'intérêt légal. Indemnité forfaitaire pour frais de recouvrement : 40 €."
            />
          </Field>
        </div>
      </Panel>

      {/* Numérotation */}
      <Panel>
        <PanelHeader title="Numérotation des factures" subtitle="Format imposé par l'administration fiscale" />
        <div className="px-6 py-6 grid grid-cols-1 md:grid-cols-2 gap-5">
          <Field id="prefix" label="Préfixe">
            <Input type="text" defaultValue="FACT" />
          </Field>
          <div>
            <label className="text-xxs uppercase tracking-wider font-semibold text-text-dim mb-1.5 block">
              Format actuel
            </label>
            <div className="px-3 py-2.5 bg-surface border border-border rounded-md text-sm font-mono text-accent">
              FACT-2026-0421
            </div>
            <p className="mt-1.5 text-xs text-text-faint">
              Préfixe · Année · Numéro séquentiel sur 4 chiffres. Numérotation continue (obligation légale).
            </p>
          </div>
        </div>
        <div className="px-6 py-4 border-t border-border bg-stone-900/[0.02] flex items-center gap-2 flex-wrap">
          <Badge tone="warning">Verrouillé</Badge>
          <span className="text-xs text-text-dim">
            La numérotation ne peut pas être modifiée une fois la première facture émise (obligation légale).
          </span>
        </div>
      </Panel>
    </div>
  );
}