"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { updateService, toggleServiceActive } from "@/app/admin/catalog/actions";
import type { Service } from "@/db/schema";

function ServiceRow({ service }: { service: Service }) {
  const [editing, setEditing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [, startTransition] = useTransition();
  const router = useRouter();

  function handleSave(fd: FormData) {
    setError(null);
    startTransition(async () => {
      try {
        await updateService(service.id, fd);
        setEditing(false);
        router.refresh();
      } catch (e) {
        setError(e instanceof Error ? e.message : "Errore nel salvataggio");
      }
    });
  }

  function handleToggle() {
    startTransition(async () => {
      await toggleServiceActive(service.id, !service.active);
      router.refresh();
    });
  }

  if (editing) {
    return (
      <tr>
        <td colSpan={5} className="px-4 py-3">
          <form
            action={handleSave}
            className="space-y-2 bg-[#f9f9f9] rounded-lg p-3 border border-[#1A463C]/20"
          >
            <div className="flex gap-3 flex-wrap">
              <div className="flex-1 min-w-[140px] space-y-1">
                <Label htmlFor={`name-${service.id}`}>Nome</Label>
                <Input
                  id={`name-${service.id}`}
                  name="name"
                  defaultValue={service.name}
                  required
                />
              </div>
              <div className="flex-[2] min-w-[180px] space-y-1">
                <Label htmlFor={`desc-${service.id}`}>Descrizione</Label>
                <Input
                  id={`desc-${service.id}`}
                  name="description"
                  defaultValue={service.description ?? ""}
                />
              </div>
              <div className="w-28 space-y-1">
                <Label htmlFor={`price-${service.id}`}>Prezzo (€)</Label>
                <Input
                  id={`price-${service.id}`}
                  name="unit_price"
                  type="number"
                  step="0.01"
                  min="0.01"
                  defaultValue={parseFloat(service.unit_price).toFixed(2)}
                  required
                />
              </div>
              <div className="flex-1 min-w-[120px] space-y-1">
                <Label htmlFor={`category-${service.id}`}>Categoria</Label>
                <Input
                  id={`category-${service.id}`}
                  name="category"
                  defaultValue={service.category ?? ""}
                />
              </div>
            </div>
            {error && <p className="text-xs text-red-600">{error}</p>}
            <div className="flex gap-2">
              <Button
                type="submit"
                size="sm"
                className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90"
              >
                Salva
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => {
                  setEditing(false);
                  setError(null);
                }}
              >
                Annulla
              </Button>
            </div>
          </form>
        </td>
      </tr>
    );
  }

  return (
    <tr
      className={`border-b border-[#f4f4f5] hover:bg-[#f9f9f9] transition-colors ${
        !service.active ? "opacity-50" : ""
      }`}
    >
      <td className="py-3 px-4 font-medium text-[#1a1a1a]">{service.name}</td>
      <td className="py-3 px-4 text-[#71717a] text-sm max-w-xs truncate">
        {service.description ?? "—"}
      </td>
      <td className="py-3 px-4 text-[#71717a] text-sm max-w-xs truncate">
        {service.category ?? "—"}
      </td>
      <td className="py-3 px-4 tabular-nums font-mono">
        €{parseFloat(service.unit_price).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
      </td>
      <td className="py-3 px-4">
        {service.active ? (
          <span className="text-xs font-medium bg-[#1A463C]/10 text-[#1A463C] px-2 py-0.5 rounded-full">
            Attivo
          </span>
        ) : (
          <span className="text-xs font-medium bg-[#f4f4f5] text-[#71717a] px-2 py-0.5 rounded-full">
            Disattivato
          </span>
        )}
      </td>
      <td className="py-3 px-4 text-right">
        <div className="flex items-center justify-end gap-2">
          <Button variant="ghost" size="sm" onClick={() => setEditing(true)}>
            Modifica
          </Button>
          <Button variant="ghost" size="sm" onClick={handleToggle}>
            {service.active ? "Disattiva" : "Riattiva"}
          </Button>
        </div>
      </td>
    </tr>
  );
}

export function ServiceTable({ services }: { services: Service[] }) {
  return (
    <div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
      <table className="w-full text-sm">
        <thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
          <tr>
            <th className="text-left py-3 px-4 font-medium text-[#71717a]">Nome</th>
            <th className="text-left py-3 px-4 font-medium text-[#71717a]">Descrizione</th>
            <th className="text-left py-3 px-4 font-medium text-[#71717a]">Categoria</th>
            <th className="text-left py-3 px-4 font-medium text-[#71717a]">Prezzo</th>
            <th className="text-left py-3 px-4 font-medium text-[#71717a]">Stato</th>
            <th className="py-3 px-4"></th>
          </tr>
        </thead>
        <tbody>
          {services.map((s) => (
            <ServiceRow key={s.id} service={s} />
          ))}
        </tbody>
      </table>
    </div>
  );
}
