// src/components/backlink/planning/backlink-detail-sheet.tsx
"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";
import type { PlanningCard } from "@/lib/backlink/planning";
import {
  setBacklinkFlagsAction,
  upsertOutreachAction,
} from "@/lib/backlink/planning-actions";
import type { BacklinkStatus } from "@/lib/db/domain-schema";
import { DrBadge } from "../dr-badge";
import { KindBadge } from "../source-badges";
import { COLUMNS } from "./planning-board";

const CHANNELS = [
  { id: "email", label: "Email" },
  { id: "form", label: "Formulaire" },
  { id: "linkedin", label: "LinkedIn" },
  { id: "twitter", label: "Twitter" },
  { id: "autre", label: "Autre" },
];

export function BacklinkDetailSheet({
  card,
  activeSiteId,
  onOpenChange,
  onMove,
  onFlagsChange,
}: {
  card: PlanningCard | null;
  activeSiteId: string;
  onOpenChange: (v: boolean) => void;
  onMove: (backlinkId: string, status: BacklinkStatus) => void;
  onFlagsChange: (
    backlinkId: string,
    flags: { toxic?: boolean; disavow?: boolean },
  ) => void;
}) {
  const router = useRouter();

  async function toggleFlag(flag: "toxic" | "disavow") {
    if (!card) return;
    const patch =
      flag === "toxic" ? { toxic: !card.toxic } : { disavow: !card.disavow };
    try {
      const r = await setBacklinkFlagsAction(
        activeSiteId,
        card.backlinkId,
        patch,
      );
      if (!r.ok) throw new Error("flag update failed");
      onFlagsChange(card.backlinkId, patch);
      toast.success("Flag mis à jour");
      router.refresh();
    } catch {
      toast.error("Échec de la mise à jour du flag");
    }
  }

  return (
    <Sheet open={card !== null} onOpenChange={onOpenChange}>
      <SheetContent className="flex flex-col gap-4 overflow-y-auto">
        {card ? (
          <>
            <SheetHeader>
              <SheetTitle>{card.source.platform}</SheetTitle>
              <SheetDescription className="break-all">
                {card.source.url}
              </SheetDescription>
            </SheetHeader>

            {/* Statut — alternative clavier au drag (a11y) */}
            <div className="space-y-1 px-4">
              <Label htmlFor="planning-status">Statut</Label>
              <Select
                value={card.status}
                onValueChange={(v) =>
                  onMove(card.backlinkId, v as BacklinkStatus)
                }
              >
                <SelectTrigger id="planning-status" className="w-full">
                  <SelectValue placeholder="Statut" />
                </SelectTrigger>
                <SelectContent position="popper">
                  {COLUMNS.map((c) => (
                    <SelectItem key={c.status} value={c.status}>
                      {c.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="flex flex-wrap items-center gap-2 px-4">
              <DrBadge value={card.source.dr ?? card.source.da} />
              <span className="text-sm tabular-nums">
                Score {card.score.toFixed(1)}
              </span>
              <KindBadge kind={card.source.kind} />
              <Badge variant="outline" className="uppercase">
                {card.source.language}
              </Badge>
            </div>

            <div className="flex flex-wrap items-center gap-2 px-4 text-sm">
              <span>Référence {card.footprint} site(s) de l'org</span>
              {card.alert ? (
                <Badge variant="destructive">⚠️ {card.footprint} sites</Badge>
              ) : null}
            </div>

            <OutreachForm
              key={card.backlinkId}
              card={card}
              activeSiteId={activeSiteId}
            />

            <div className="flex items-center gap-2 px-4 pb-4">
              <Button
                variant={card.toxic ? "destructive" : "outline"}
                aria-pressed={card.toxic}
                onClick={() => toggleFlag("toxic")}
              >
                ☠️ Toxic
              </Button>
              <Button
                variant={card.disavow ? "destructive" : "outline"}
                aria-pressed={card.disavow}
                onClick={() => toggleFlag("disavow")}
              >
                Disavow
              </Button>
            </div>
          </>
        ) : null}
      </SheetContent>
    </Sheet>
  );
}

/** Form local — keyé par backlinkId pour ré-initialiser au changement de carte. */
function OutreachForm({
  card,
  activeSiteId,
}: {
  card: PlanningCard;
  activeSiteId: string;
}) {
  const router = useRouter();
  const [contact, setContact] = useState(card.outreach?.contact ?? "");
  const [channel, setChannel] = useState(card.outreach?.channel ?? "");
  const [attempts, setAttempts] = useState(
    String(card.outreach?.attempts ?? 0),
  );
  const [lastContactAt, setLastContactAt] = useState(
    card.outreach?.lastContactAt?.slice(0, 10) ?? "",
  );
  const [notes, setNotes] = useState(card.outreach?.notes ?? "");
  const [busy, setBusy] = useState(false);

  async function save() {
    setBusy(true);
    try {
      const r = await upsertOutreachAction(activeSiteId, card.backlinkId, {
        contact: contact || null,
        channel: channel || null,
        attempts: Math.max(0, Number(attempts) || 0),
        lastContactAt: lastContactAt || null,
        notes: notes || null,
      });
      if (!r.ok) throw new Error("outreach upsert failed");
      toast.success("Outreach enregistré");
      router.refresh();
    } catch {
      toast.error("Échec de l'enregistrement");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="space-y-3 border-t px-4 pt-4">
      <p className="font-medium text-sm">Outreach</p>
      <div className="space-y-1">
        <Label htmlFor="outreach-contact">Contact</Label>
        <Input
          id="outreach-contact"
          value={contact}
          onChange={(e) => setContact(e.target.value)}
          placeholder="nom@exemple.com"
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="outreach-channel">Canal</Label>
        <Select value={channel} onValueChange={setChannel}>
          <SelectTrigger id="outreach-channel" className="w-full">
            <SelectValue placeholder="Canal" />
          </SelectTrigger>
          <SelectContent position="popper">
            {CHANNELS.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-1">
        <Label htmlFor="outreach-attempts">Tentatives</Label>
        <Input
          id="outreach-attempts"
          type="number"
          min={0}
          value={attempts}
          onChange={(e) => setAttempts(e.target.value)}
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="outreach-last-contact">Dernière prise de contact</Label>
        <Input
          id="outreach-last-contact"
          type="date"
          value={lastContactAt}
          onChange={(e) => setLastContactAt(e.target.value)}
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="outreach-notes">Notes</Label>
        <Textarea
          id="outreach-notes"
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          rows={3}
        />
      </div>
      <Button size="sm" onClick={save} disabled={busy}>
        Enregistrer
      </Button>
    </div>
  );
}