// src/components/backlink/add-source-dialog.tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { addSourceAction } from "@/lib/backlink/import-actions";
import { EFFORTS, LINK_TYPES, SOURCE_KINDS } from "@/lib/backlink/types";

const EMPTY_FORM: Record<string, string> = {
  url: "",
  platform: "",
  category: "Directory",
  da: "",
  effort: "medium",
  link_type: "dofollow",
  language: "en",
  themes: "",
  tags: "",
  note: "",
};

export function AddSourceDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (o: boolean) => void;
}) {
  const [form, setForm] = useState<Record<string, string>>(EMPTY_FORM);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const set = (k: string, v: string) => setForm((f) => ({ ...f, [k]: v }));

  async function submit() {
    setError(null);
    setPending(true);
    try {
      const res = await addSourceAction(form);
      if (!res.ok) {
        setError(res.error);
        return;
      }
      onOpenChange(false);
      setForm(EMPTY_FORM);
      setError(null);
    } finally {
      setPending(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Ajouter une source</DialogTitle>
          <DialogDescription>
            Ajoutée au reservoir de l'organisation.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-3">
          <Input
            placeholder="URL (https://…)"
            aria-label="URL"
            value={form.url}
            onChange={(e) => set("url", e.target.value)}
          />
          <Input
            placeholder="Plateforme (ex. Product Hunt)"
            aria-label="Plateforme"
            value={form.platform}
            onChange={(e) => set("platform", e.target.value)}
          />
          <div className="flex gap-2">
            <Select
              value={form.category}
              onValueChange={(v) => set("category", v)}
            >
              <SelectTrigger className="flex-1" aria-label="Catégorie">
                <SelectValue />
              </SelectTrigger>
              <SelectContent position="popper">
                {SOURCE_KINDS.map((k) => (
                  <SelectItem key={k.id} value={k.label}>
                    {k.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Input
              type="number"
              placeholder="DR"
              aria-label="DR"
              className="w-24"
              value={form.da}
              onChange={(e) => set("da", e.target.value)}
            />
          </div>
          <div className="flex gap-2">
            <Select value={form.effort} onValueChange={(v) => set("effort", v)}>
              <SelectTrigger className="flex-1" aria-label="Effort">
                <SelectValue />
              </SelectTrigger>
              <SelectContent position="popper">
                {EFFORTS.map((e) => (
                  <SelectItem key={e} value={e}>
                    {e}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={form.link_type}
              onValueChange={(v) => set("link_type", v)}
            >
              <SelectTrigger className="flex-1" aria-label="Type de lien">
                <SelectValue />
              </SelectTrigger>
              <SelectContent position="popper">
                {LINK_TYPES.map((t) => (
                  <SelectItem key={t} value={t}>
                    {t}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          {error ? (
            <p className="text-destructive text-sm" role="alert">
              {error}
            </p>
          ) : null}
          <div className="flex justify-end">
            <Button
              onClick={submit}
              disabled={!form.url.trim() || !form.platform.trim() || pending}
            >
              {pending ? "Ajout…" : "Ajouter"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}