"use client";

import { useMemo, useState } from "react";
import { Database, FilePenLine, PauseCircle, PlayCircle, Plus, Trash2, X } from "lucide-react";
import { SourceBadge } from "@/components/SourceBadge";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { getSourceBreakdown } from "@/lib/analytics";
import { getReviews } from "@/lib/data";
import type { Source } from "@/lib/types";

type SourceStatus = "active" | "partielle" | "pause";
type EditableSource = {
  id: string;
  source?: Source;
  label: string;
  type: string;
  coverage: string;
  status: SourceStatus;
  url: string;
  mentions: number;
  updatedAt: string;
  enabled: boolean;
  internalNote: string;
};

const sourceMeta: Record<Source, { type: string; coverage: string; status: SourceStatus; url: string }> = {
  vivino: { type: "avis consommateur", coverage: "Monde", status: "active", url: "https://www.vivino.com" },
  cellartracker: { type: "avis collectionneurs", coverage: "US, UK, Asie", status: "active", url: "https://www.cellartracker.com" },
  reddit: { type: "forum", coverage: "US, UK, Canada", status: "active", url: "https://www.reddit.com/r/wine" },
  lpv: { type: "forum", coverage: "France, Belgique, Suisse", status: "active", url: "https://www.lapassionduvin.com" },
  "wine-spectator": { type: "presse spécialisée", coverage: "US", status: "partielle", url: "https://www.winespectator.com" },
  decanter: { type: "presse spécialisée", coverage: "Royaume-Uni, Monde", status: "active", url: "https://www.decanter.com" },
  rvf: { type: "presse spécialisée", coverage: "France", status: "active", url: "https://www.larvf.com" },
  suckling: { type: "critique", coverage: "Monde, Asie", status: "active", url: "https://www.jamessuckling.com" },
  vinatis: { type: "e-commerce", coverage: "France", status: "partielle", url: "https://www.vinatis.com" },
  millesima: { type: "e-commerce", coverage: "France, US, Asie", status: "active", url: "https://www.millesima.fr" },
  "wine.com": { type: "e-commerce", coverage: "US", status: "active", url: "https://www.wine.com" },
  "berry-bros": { type: "e-commerce", coverage: "Royaume-Uni", status: "active", url: "https://www.bbr.com" },
  hawesko: { type: "e-commerce", coverage: "Allemagne", status: "active", url: "https://www.hawesko.de" }
};

const sourceNotes: Record<Source, string> = {
  vivino: "Bon thermomètre consommateur, à contrôler pour les pics isolés.",
  cellartracker: "Signal collectionneurs très utile sur US, UK, Japon et Hong Kong.",
  reddit: "Lecture qualitative des discussions longues, souvent comparatives.",
  lpv: "Forum français exigeant, utile pour repérer les irritants d'élevage.",
  "wine-spectator": "Couverture partielle, surtout utile lors des grandes sorties presse.",
  decanter: "Source prioritaire pour le Royaume-Uni et la lecture internationale.",
  rvf: "Référence française, à citer avec prudence dans les notes famille.",
  suckling: "Très visible en Asie, signal critique plus que consommateur.",
  vinatis: "Volume faible mais utile pour les retours de distribution française.",
  millesima: "À suivre pour les fiches, stocks et commentaires e-commerce premium.",
  "wine.com": "Bon indicateur US e-commerce, surtout sur les cuvées récentes.",
  "berry-bros": "Signal UK marchand, intéressant pour les collectionneurs.",
  hawesko: "À surveiller après le signal rouge 2017 et la piste stockage."
};

export default function SourcesPage() {
  const initialRows = useMemo(() => {
    return getSourceBreakdown(getReviews()).map((row): EditableSource => {
      const meta = sourceMeta[row.source];
      return {
        id: row.source,
        source: row.source,
        label: row.label,
        type: meta.type,
        coverage: meta.coverage,
        status: meta.status,
        url: meta.url,
        mentions: row.mentions,
        updatedAt: row.updatedAt,
        enabled: meta.status !== "pause",
        internalNote: sourceNotes[row.source]
      };
    });
  }, []);
  const [sources, setSources] = useState<EditableSource[]>(initialRows);
  const [addOpen, setAddOpen] = useState(false);
  const [editingNoteId, setEditingNoteId] = useState<string | null>(null);
  const [newSource, setNewSource] = useState({
    label: "",
    type: "",
    coverage: "",
    url: "",
    internalNote: ""
  });
  const visibleSources = sources.filter((source) => source.enabled);
  const editingSource = sources.find((source) => source.id === editingNoteId);

  function toggleSource(id: string) {
    setSources((current) =>
      current.map((source) =>
        source.id === id
          ? {
              ...source,
              enabled: !source.enabled,
              status: source.enabled ? "pause" : "active"
            }
          : source
      )
    );
  }

  function deleteSource(id: string) {
    setSources((current) => current.filter((source) => source.id !== id));
  }

  function updateNote(id: string, internalNote: string) {
    setSources((current) => current.map((source) => (source.id === id ? { ...source, internalNote } : source)));
  }

  function addSource() {
    const label = newSource.label.trim();
    if (!label) return;
    setSources((current) => [
      {
        id: `custom-${Date.now()}`,
        label,
        type: newSource.type,
        coverage: newSource.coverage,
        status: "active",
        url: newSource.url.trim(),
        mentions: 0,
        updatedAt: "2026-05-26",
        enabled: true,
        internalNote: newSource.internalNote.trim()
      },
      ...current
    ]);
    setNewSource({ label: "", type: "", coverage: "", url: "", internalNote: "" });
    setAddOpen(false);
  }

  return (
    <div className="space-y-8">
      <section>
        <Badge tone="gold">Traçabilité</Badge>
        <h1 className="mt-4 font-serif text-5xl font-semibold text-bordeaux-deep">Sources & méthodologie</h1>
        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-charcoal">
          Où les signaux sont captés. À quelle fréquence. Avec quel degré de couverture.
        </p>
      </section>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Sources monitorées</CardTitle>
            <CardDescription>
              {visibleSources.length} sources actives sur {sources.length}. Sélection, ajout et suppression sont simulés
              côté navigateur.
            </CardDescription>
          </div>
          <div className="flex items-center gap-3">
            <Database className="h-5 w-5 text-gold" strokeWidth={1.5} />
            <Button onClick={() => setAddOpen(true)} aria-label="Ajouter une source">
              <Plus className="h-4 w-4" strokeWidth={1.5} />
              Ajouter une source
            </Button>
          </div>
        </CardHeader>
        {addOpen ? (
          <div className="fixed inset-0 z-50 bg-charcoal/30">
            <button className="absolute inset-0 h-full w-full cursor-default" type="button" aria-label="Fermer" onClick={() => setAddOpen(false)} />
            <div className="absolute left-1/2 top-20 w-[min(92vw,32rem)] -translate-x-1/2 rounded-md border border-gold/35 bg-ivory p-5 shadow-vellum xl:right-8 xl:left-auto xl:top-24 xl:w-full xl:max-w-lg xl:translate-x-0 xl:p-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs uppercase tracking-[0.16em] text-smoke">Nouvelle référence</p>
                  <h2 className="mt-2 font-serif text-3xl font-semibold text-bordeaux-deep">Ajouter une source</h2>
                </div>
                <button type="button" onClick={() => setAddOpen(false)} aria-label="Fermer" className="rounded-md p-2 hover:bg-gold/10">
                  <X className="h-5 w-5 text-bordeaux-deep" strokeWidth={1.5} />
                </button>
              </div>
              <div className="mt-6 grid gap-3">
                <input
                  value={newSource.label}
                  onChange={(event) => setNewSource((current) => ({ ...current, label: event.target.value }))}
                  placeholder="Nom"
                  className="h-10 rounded-md border border-gold/30 bg-ivory-warm px-3 text-sm"
                />
                <input
                  value={newSource.type}
                  onChange={(event) => setNewSource((current) => ({ ...current, type: event.target.value }))}
                  placeholder="Type : influenceur, presse papier, podcast, caviste..."
                  className="h-10 rounded-md border border-gold/30 bg-ivory-warm px-3 text-sm"
                />
                <input
                  value={newSource.coverage}
                  onChange={(event) => setNewSource((current) => ({ ...current, coverage: event.target.value }))}
                  placeholder="Couverture"
                  className="h-10 rounded-md border border-gold/30 bg-ivory-warm px-3 text-sm"
                />
                <input
                  value={newSource.url}
                  onChange={(event) => setNewSource((current) => ({ ...current, url: event.target.value }))}
                  placeholder="URL ou référence"
                  className="h-10 rounded-md border border-gold/30 bg-ivory-warm px-3 text-sm"
                />
                <textarea
                  value={newSource.internalNote}
                  onChange={(event) => setNewSource((current) => ({ ...current, internalNote: event.target.value }))}
                  placeholder="Note interne"
                  rows={4}
                  className="rounded-md border border-gold/30 bg-ivory-warm px-3 py-2 text-sm"
                />
              </div>
              <div className="mt-5 flex justify-end gap-2">
                <Button variant="secondary" onClick={() => setAddOpen(false)}>
                  Annuler
                </Button>
                <Button onClick={addSource}>
                  <Plus className="h-4 w-4" strokeWidth={1.5} />
                  Ajouter
                </Button>
              </div>
            </div>
          </div>
        ) : null}
        {editingSource ? (
          <div className="fixed inset-0 z-50 bg-charcoal/30">
            <button className="absolute inset-0 h-full w-full cursor-default" type="button" aria-label="Fermer" onClick={() => setEditingNoteId(null)} />
            <div className="absolute left-1/2 top-20 w-[min(92vw,28rem)] -translate-x-1/2 rounded-md border border-gold/35 bg-ivory p-5 shadow-vellum xl:right-8 xl:left-auto xl:top-24 xl:w-full xl:max-w-md xl:translate-x-0 xl:p-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs uppercase tracking-[0.16em] text-smoke">Note interne</p>
                  <h2 className="mt-2 font-serif text-3xl font-semibold text-bordeaux-deep">{editingSource.label}</h2>
                </div>
                <button type="button" onClick={() => setEditingNoteId(null)} aria-label="Fermer" className="rounded-md p-2 hover:bg-gold/10">
                  <X className="h-5 w-5 text-bordeaux-deep" strokeWidth={1.5} />
                </button>
              </div>
              <textarea
                value={editingSource.internalNote}
                onChange={(event) => updateNote(editingSource.id, event.target.value)}
                rows={6}
                className="mt-5 w-full rounded-md border border-gold/30 bg-ivory-warm px-3 py-2 text-sm leading-relaxed text-charcoal"
                placeholder="Ajouter une note"
              />
              <div className="mt-5 flex justify-end">
                <Button onClick={() => setEditingNoteId(null)}>Fermer</Button>
              </div>
            </div>
          </div>
        ) : null}
        <div className="overflow-x-auto">
          <table className="w-full min-w-[980px] text-sm">
            <thead>
              <tr className="border-b border-gold/25 text-left text-xs uppercase tracking-[0.14em] text-smoke">
                <th className="py-3">Suivi</th>
                <th className="py-3">Source</th>
                <th className="py-3">Type</th>
                <th className="py-3">Couverture</th>
                <th className="py-3">Mentions</th>
                <th className="py-3">Dernière mise à jour</th>
                <th className="py-3">Statut</th>
                <th className="py-3">Note interne</th>
                <th className="py-3">Lien</th>
                <th className="py-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              {sources.map((row) => {
                return (
                  <tr key={row.id} className={row.enabled ? "border-b border-gold/15" : "border-b border-gold/15 opacity-55"}>
                    <td className="py-3">
                      <input
                        type="checkbox"
                        checked={row.enabled}
                        onChange={() => toggleSource(row.id)}
                        className="h-5 w-5 accent-bordeaux-deep"
                        aria-label={`Suivre ${row.label}`}
                      />
                    </td>
                    <td className="py-3">
                      {row.source ? <SourceBadge source={row.source} /> : <Badge tone="gold">{row.label}</Badge>}
                    </td>
                    <td className="py-3">{row.type}</td>
                    <td className="py-3 text-smoke">{row.coverage}</td>
                    <td className="py-3 font-mono">{row.mentions}</td>
                    <td className="py-3 font-mono text-smoke">{row.updatedAt}</td>
                    <td className="py-3">
                      <span className="inline-flex items-center gap-2">
                        {row.status === "pause" ? <PauseCircle className="h-4 w-4 text-rust" strokeWidth={1.5} /> : <PlayCircle className="h-4 w-4 text-sage" strokeWidth={1.5} />}
                        {row.status}
                      </span>
                    </td>
                    <td className="py-3">
                      <button
                        type="button"
                        onClick={() => setEditingNoteId(row.id)}
                        className="group flex max-w-56 items-center gap-2 text-left text-xs text-smoke hover:text-bordeaux-deep"
                      >
                        <FilePenLine className="h-4 w-4 shrink-0 text-gold" strokeWidth={1.5} />
                        <span className="truncate">
                          {row.internalNote || "Ajouter une note"}
                        </span>
                      </button>
                    </td>
                    <td className="py-3">
                      {row.url ? (
                        <a href={row.url} target="_blank" rel="noreferrer" className="text-bordeaux-deep underline decoration-gold/50 underline-offset-4">
                          ouvrir
                        </a>
                      ) : (
                        <span className="text-smoke">référence interne</span>
                      )}
                    </td>
                    <td className="py-3">
                      <button
                        type="button"
                        onClick={() => deleteSource(row.id)}
                        className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-rust/30 text-rust hover:bg-rust/10"
                        aria-label={`Supprimer ${row.label}`}
                      >
                        <Trash2 className="h-4 w-4" strokeWidth={1.5} />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>

      <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
        <Card className="bg-ivory">
          <CardTitle>Méthodologie</CardTitle>
          <div className="mt-5 space-y-4 text-sm leading-relaxed text-charcoal">
            <p>
              Chaque jour, les pages publiques suivies sont relevées source par source. Les doublons sont retirés, puis
              les mentions sont rattachées à une cuvée, un millésime, un marché et un type d'auteur.
            </p>
            <p>
              Les textes sont conservés dans leur langue originale. Une version française est produite pour permettre une
              lecture commune au domaine, sans perdre le lien vers la source d'origine.
            </p>
            <p>
              Le sentiment et les descripteurs sont calculés à partir du texte public. Les citations importantes restent
              vérifiables : chaque entrée garde sa source, sa date et son contexte.
            </p>
          </div>
        </Card>

        <Card>
          <CardTitle>Sources à venir</CardTitle>
          <Separator className="my-5" />
          <div className="space-y-3">
            {["Instagram, sous réserve", "TikTok #winetok", "Podcasts de dégustation, transcription", "Commentaires distributeurs, accès privé"].map((item) => (
              <div key={item} className="rounded-md border border-gold/20 bg-ivory p-4 text-sm text-charcoal">
                {item}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}