"use client";

import { useState, useTransition } from "react";
import {
  addTargetAction,
  deleteTargetAction,
  promoteTargetAction,
  type ActionResult,
} from "@/app/(app)/settings/sites/[siteId]/actions";
import { LocaleSelect } from "@/components/sites/locale-select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { COUNTRIES, LANGUAGES, formatTarget } from "@/lib/locales";
import type { Target } from "@/lib/sites";

export function TargetsManager({ siteId, targets }: { siteId: string; targets: Target[] }) {
  const [country, setCountry] = useState("FR");
  const [language, setLanguage] = useState("fr");
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  const run = (action: () => Promise<ActionResult>) => {
    setError(null);
    startTransition(async () => {
      const result = await action();
      if ("error" in result) setError(result.error);
    });
  };

  return (
    <div className="space-y-3">
      <ul className="space-y-2">
        {targets.map((target) => (
          <li
            key={target.id}
            className="flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm"
          >
            <span className="flex items-center gap-2">
              {formatTarget(target)}
              {target.is_default ? <Badge variant="secondary">par défaut</Badge> : null}
            </span>
            {target.is_default ? null : (
              <span className="flex gap-2">
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  disabled={pending}
                  onClick={() => run(() => promoteTargetAction({ siteId, targetId: target.id }))}
                >
                  Par défaut
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  disabled={pending}
                  onClick={() => run(() => deleteTargetAction({ siteId, targetId: target.id }))}
                >
                  Supprimer
                </Button>
              </span>
            )}
          </li>
        ))}
      </ul>
      <form
        className="flex flex-wrap items-end gap-2"
        onSubmit={(event) => {
          event.preventDefault();
          run(() => addTargetAction({ siteId, country, language }));
        }}
      >
        <div className="w-44 space-y-1">
          <Label htmlFor="new-country">Pays</Label>
          <LocaleSelect
            id="new-country"
            label="Pays de la nouvelle cible"
            options={COUNTRIES}
            value={country}
            onValueChange={setCountry}
          />
        </div>
        <div className="w-44 space-y-1">
          <Label htmlFor="new-language">Langue</Label>
          <LocaleSelect
            id="new-language"
            label="Langue de la nouvelle cible"
            options={LANGUAGES}
            value={language}
            onValueChange={setLanguage}
          />
        </div>
        <Button type="submit" disabled={pending}>
          Ajouter
        </Button>
      </form>
      {error ? (
        <p role="alert" className="text-destructive text-sm">
          {error}
        </p>
      ) : null}
    </div>
  );
}