"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Plus, Pencil, Trash2, Copy, Globe, Check, X } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import {
  addSite,
  updateSite,
  deleteSite,
  testSiteConnection,
  type TestConnectionResult,
} from "../actions";

type Site = {
  id: string;
  domain: string;
  label: string | null;
  status: string;
  plan: string;
  monthlyAmountCents: number;
  searchConsoleSiteUrl: string | null;
  ga4PropertyId: string | null;
};

const PLAN_OPTIONS = [
  { value: "presence", label: "Presence (49,99 €)" },
  { value: "developpement", label: "Developpement (a partir de 99 €)" },
  { value: "ecommerce", label: "E-commerce (a partir de 199 €)" },
];

const STATUS_OPTIONS = [
  { value: "en_preparation", label: "En preparation" },
  { value: "en_ligne", label: "En ligne" },
  { value: "maintenance", label: "Maintenance" },
];

const STATUS_TONES: Record<string, "success" | "warning" | "muted"> = {
  en_ligne: "success",
  maintenance: "warning",
  en_preparation: "muted",
};

const STATUS_LABELS: Record<string, string> = {
  en_preparation: "En preparation",
  en_ligne: "En ligne",
  maintenance: "Maintenance",
};

const PLAN_LABELS: Record<string, string> = {
  presence: "Presence",
  developpement: "Developpement",
  ecommerce: "E-commerce",
};

export function SitesManager({
  clientAccountId,
  sites,
  serviceAccountEmail,
}: {
  clientAccountId: string;
  sites: Site[];
  serviceAccountEmail: string | null;
}) {
  const [editingId, setEditingId] = useState<string | null>(null);
  const [adding, setAdding] = useState(false);

  return (
    <Panel>
      <PanelHeader
        title="Sites"
        subtitle={`${sites.length} site${sites.length > 1 ? "s" : ""} rattache${sites.length > 1 ? "s" : ""} a ce compte`}
        trailing={
          !adding ? (
            <Button variant="primary" size="sm" onClick={() => setAdding(true)}>
              <Plus className="size-3.5" />
              Ajouter un site
            </Button>
          ) : null
        }
      />

      {adding ? (
        <div className="px-6 py-5 border-b border-border bg-stone-900/[0.02]">
          <SiteForm
            mode="add"
            clientAccountId={clientAccountId}
            serviceAccountEmail={serviceAccountEmail}
            onDone={() => setAdding(false)}
            onCancel={() => setAdding(false)}
          />
        </div>
      ) : null}

      {sites.length === 0 && !adding ? (
        <EmptyState
          icon={Globe}
          title="Aucun site rattache"
          description="Ajoutez un site pour pouvoir y connecter Search Console et Google Analytics."
          compact
        />
      ) : (
        <ul className="divide-y divide-border">
          {sites.map((site) => (
            <li key={site.id} className="px-6 py-5">
              {editingId === site.id ? (
                <SiteForm
                  mode="edit"
                  siteId={site.id}
                  initial={site}
                  clientAccountId={clientAccountId}
                  serviceAccountEmail={serviceAccountEmail}
                  onDone={() => setEditingId(null)}
                  onCancel={() => setEditingId(null)}
                />
              ) : (
                <SiteRow
                  site={site}
                  onEdit={() => setEditingId(site.id)}
                />
              )}
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}

function SiteRow({ site, onEdit }: { site: Site; onEdit: () => void }) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [testResult, setTestResult] = useState<TestConnectionResult | null>(null);
  const [testing, setTesting] = useState(false);

  function handleDelete() {
    if (!confirm(`Supprimer le site ${site.domain} ? Cette action est definitive.`)) return;
    startTransition(async () => {
      const result = await deleteSite(site.id);
      if (result.ok) router.refresh();
      else alert(result.error);
    });
  }

  async function handleTest() {
    setTesting(true);
    setTestResult(null);
    try {
      const r = await testSiteConnection(site.id);
      setTestResult(r);
    } finally {
      setTesting(false);
    }
  }

  const canTest = Boolean(site.searchConsoleSiteUrl || site.ga4PropertyId);

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-mono text-sm text-text">{site.domain}</span>
            <Badge tone={STATUS_TONES[site.status] ?? "muted"} dot>
              {STATUS_LABELS[site.status] ?? site.status}
            </Badge>
            <Badge tone="muted">{PLAN_LABELS[site.plan] ?? site.plan}</Badge>
          </div>
          {site.label ? (
            <div className="mt-1 text-xs text-text-dim">{site.label}</div>
          ) : null}
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {canTest ? (
            <Button
              variant="ghost"
              size="sm"
              onClick={handleTest}
              loading={testing}
            >
              Tester la connexion
            </Button>
          ) : null}
          <Button variant="ghost" size="sm" onClick={onEdit}>
            <Pencil className="size-3.5" />
            Editer
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={handleDelete}
            loading={isPending}
            aria-label={`Supprimer ${site.domain}`}
          >
            <Trash2 className="size-3.5" />
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
        <ConnectionStatus
          label="Search Console"
          value={site.searchConsoleSiteUrl}
          checkResult={testResult?.searchConsole}
        />
        <ConnectionStatus
          label="Google Analytics 4"
          value={site.ga4PropertyId}
          checkResult={testResult?.analytics}
        />
      </div>
    </div>
  );
}

function ConnectionStatus({
  label,
  value,
  checkResult,
}: {
  label: string;
  value: string | null;
  checkResult?: string;
}) {
  return (
    <div className="rounded-md border border-border bg-stone-900/[0.02] px-3 py-2 space-y-1.5">
      <div className="flex items-center gap-2">
        <span className="text-xxs uppercase tracking-wider text-text-faint shrink-0">{label}</span>
        <span className="text-text-muted truncate">
          {value ?? <span className="text-text-faint italic">non connecte</span>}
        </span>
      </div>
      {checkResult ? <CheckResultLine result={checkResult} /> : null}
    </div>
  );
}

function CheckResultLine({ result }: { result: string }) {
  if (result === "ok") {
    return (
      <div className="flex items-center gap-1.5 text-[color:var(--color-success)] text-xxs">
        <Check className="size-3" />
        <span>Connexion OK</span>
      </div>
    );
  }
  if (result === "missing_config") {
    return (
      <div className="flex items-center gap-1.5 text-text-faint text-xxs italic">
        Identifiant non renseigne.
      </div>
    );
  }
  if (result === "no_credentials") {
    return (
      <div className="flex items-center gap-1.5 text-[color:var(--color-warning)] text-xxs">
        <X className="size-3" />
        <span>Cle service account absente du serveur (GOOGLE_SERVICE_ACCOUNT_KEY_JSON).</span>
      </div>
    );
  }
  return (
    <div className="flex items-start gap-1.5 text-[color:var(--color-danger)] text-xxs">
      <X className="size-3 mt-0.5 shrink-0" />
      <span className="leading-snug">{result}</span>
    </div>
  );
}

function SiteForm({
  mode,
  siteId,
  initial,
  clientAccountId,
  serviceAccountEmail,
  onDone,
  onCancel,
}: {
  mode: "add" | "edit";
  siteId?: string;
  initial?: Site;
  clientAccountId: string;
  serviceAccountEmail: string | null;
  onDone: () => void;
  onCancel: () => void;
}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    const formData = new FormData(event.currentTarget);

    startTransition(async () => {
      const result =
        mode === "add"
          ? await addSite(clientAccountId, formData)
          : await updateSite(siteId!, formData);

      if (!result.ok) {
        setError(result.error);
        return;
      }
      router.refresh();
      onDone();
    });
  }

  return (
    <form className="space-y-4" onSubmit={handleSubmit}>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <Field id="domain" label="Domaine" required>
          <Input
            type="text"
            name="domain"
            defaultValue={initial?.domain ?? ""}
            placeholder="cabinet-vidal.fr"
            required
            autoComplete="url"
            disabled={isPending}
          />
        </Field>

        <Field id="label" label="Libelle court" hint="Pour le selecteur de site cote portail">
          <Input
            type="text"
            name="label"
            defaultValue={initial?.label ?? ""}
            placeholder="Cabinet de Lyon"
            disabled={isPending}
          />
        </Field>

        <Field id="plan" label="Plan" required>
          <Select
            name="plan"
            defaultValue={initial?.plan ?? "presence"}
            required
            disabled={isPending}
          >
            {PLAN_OPTIONS.map((p) => (
              <option key={p.value} value={p.value}>
                {p.label}
              </option>
            ))}
          </Select>
        </Field>

        <Field id="status" label="Statut" required>
          <Select
            name="status"
            defaultValue={initial?.status ?? "en_preparation"}
            required
            disabled={isPending}
          >
            {STATUS_OPTIONS.map((s) => (
              <option key={s.value} value={s.value}>
                {s.label}
              </option>
            ))}
          </Select>
        </Field>
      </div>

      <GoogleHelperBox serviceAccountEmail={serviceAccountEmail} />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <Field
          id="searchConsoleSiteUrl"
          label="Search Console (URL propriete)"
          hint="Tape juste le domaine (ex : cabinet-vidal.fr) ou colle l'identifiant exact si propriete URL"
        >
          <Input
            type="text"
            name="searchConsoleSiteUrl"
            defaultValue={initial?.searchConsoleSiteUrl ?? ""}
            placeholder="cabinet-vidal.fr"
            disabled={isPending}
          />
        </Field>

        <Field
          id="ga4PropertyId"
          label="GA4 Property ID"
          hint="Le numero (sans properties/)"
        >
          <Input
            type="text"
            name="ga4PropertyId"
            defaultValue={initial?.ga4PropertyId ?? ""}
            placeholder="123456789"
            inputMode="numeric"
            disabled={isPending}
          />
        </Field>
      </div>

      {error ? (
        <p
          role="alert"
          className="rounded-md border border-[color:var(--color-danger)]/30 bg-[color:var(--color-danger)]/10 px-3 py-2 text-sm text-[color:var(--color-danger)]"
        >
          {error}
        </p>
      ) : null}

      <div className="flex items-center gap-2">
        <Button type="submit" variant="primary" size="sm" loading={isPending}>
          {mode === "add" ? "Ajouter le site" : "Enregistrer"}
        </Button>
        <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={isPending}>
          Annuler
        </Button>
      </div>
    </form>
  );
}

function GoogleHelperBox({ serviceAccountEmail }: { serviceAccountEmail: string | null }) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    if (!serviceAccountEmail) return;
    try {
      await navigator.clipboard.writeText(serviceAccountEmail);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      // ignore
    }
  }

  return (
    <div className="rounded-md border border-accent/20 bg-accent/[0.04] p-4 space-y-3">
      <div>
        <div className="text-xs font-semibold text-accent-hi uppercase tracking-wider">
          Connecter Search Console et GA4
        </div>
        <p className="mt-1 text-xs text-text-muted">
          Ajoutez le service account Novelia comme utilisateur dans la Search Console et la
          propriete GA4 du client, puis collez les identifiants ci-dessous.
        </p>
      </div>

      {serviceAccountEmail ? (
        <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
          <div className="min-w-0 flex-1">
            <div className="text-xxs uppercase tracking-wider text-text-faint">
              Service account
            </div>
            <div className="text-sm font-mono text-text truncate">{serviceAccountEmail}</div>
          </div>
          <Button type="button" variant="ghost" size="sm" onClick={copy}>
            <Copy className="size-3.5" />
            {copied ? "Copie" : "Copier"}
          </Button>
        </div>
      ) : (
        <div className="rounded-md border border-[color:var(--color-warning)]/30 bg-[color:var(--color-warning)]/[0.06] px-3 py-2 text-xs text-text-muted">
          Definissez <code className="font-mono">GOOGLE_SERVICE_ACCOUNT_EMAIL</code> dans
          <code className="font-mono"> .env.production</code> pour pouvoir le copier-coller ici.
        </div>
      )}

      <ol className="space-y-1.5 text-xs text-text-muted list-decimal list-inside">
        <li>Search Console &gt; Parametres &gt; Utilisateurs et autorisations &gt; Ajouter (role Proprietaire).</li>
        <li>GA4 &gt; Administration &gt; Gestion des acces de la propriete &gt; Ajouter (role Analyste).</li>
        <li>GA4 &gt; Administration &gt; Details de la propriete &gt; copier la Property ID.</li>
        <li>Coller le domaine GSC et la Property ID GA4 dans les champs ci-dessous.</li>
      </ol>
    </div>
  );
}