"use client";
import { useEffect, useState } from "react";
import Card from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";

interface Servicio {
  id: string;
  nombre: string;
  duracionHoras: number;
  activo: boolean;
}

export default function JefeServicios() {
  const [servicios, setServicios] = useState<Servicio[]>([]);
  const [loading, setLoading] = useState(true);
  const [nombre, setNombre] = useState("");
  const [duracion, setDuracion] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [guardando, setGuardando] = useState(false);

  useEffect(() => { cargar(); }, []);

  async function cargar() {
    setLoading(true);
    const res = await fetch("/api/jefe/servicios");
    const data = await res.json();
    setServicios(Array.isArray(data) ? data : []);
    setLoading(false);
  }

  async function agregar(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setGuardando(true);
    const res = await fetch("/api/jefe/servicios", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ nombre, duracionHoras: duracion }),
    });
    setGuardando(false);
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setError(d.error ?? "No se pudo guardar el trabajo");
      return;
    }
    setNombre("");
    setDuracion("");
    cargar();
  }

  async function toggleActivo(s: Servicio) {
    await fetch(`/api/jefe/servicios/${s.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ activo: !s.activo }),
    });
    cargar();
  }

  async function editarDuracion(s: Servicio) {
    const valor = prompt(`Duración de "${s.nombre}" en horas:`, String(s.duracionHoras));
    if (valor == null) return;
    const res = await fetch(`/api/jefe/servicios/${s.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ duracionHoras: valor }),
    });
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      alert(d.error ?? "No se pudo actualizar");
      return;
    }
    cargar();
  }

  async function eliminar(s: Servicio) {
    if (!confirm(`¿Eliminar el trabajo "${s.nombre}"?`)) return;
    const res = await fetch(`/api/jefe/servicios/${s.id}`, { method: "DELETE" });
    const d = await res.json().catch(() => ({}));
    if (d.desactivado)
      alert("El trabajo ya tenía turnos asociados, así que se desactivó en vez de borrarse.");
    cargar();
  }

  return (
    <div className="flex flex-col gap-6">
      <h2 className="text-xl sm:text-2xl font-bold text-white">Mis trabajos y tiempos</h2>

      <Card>
        <form onSubmit={agregar} className="flex flex-col gap-3">
          <p className="text-sm text-gray-600">
            Cargá los trabajos que ofrecés y cuánto tardan. Son los que verá el cliente al reservar por WhatsApp.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3 items-end">
            <Input
              label="Trabajo"
              placeholder="Ej: Cambio de aceite"
              value={nombre}
              onChange={(e) => setNombre(e.target.value)}
              required
            />
            <Input
              label="Duración (horas)"
              type="text"
              inputMode="decimal"
              placeholder="Ej: 1.5"
              value={duracion}
              onChange={(e) => setDuracion(e.target.value)}
              className="sm:w-40"
              required
            />
          </div>
          {error && <p className="text-sm text-red-500">{error}</p>}
          <div>
            <Button type="submit" loading={guardando}>Agregar trabajo</Button>
          </div>
        </form>
      </Card>

      {loading ? (
        <div className="text-center py-10 text-gray-200">Cargando...</div>
      ) : servicios.length === 0 ? (
        <Card>
          <p className="text-center text-gray-400 py-4">Todavía no cargaste ningún trabajo.</p>
        </Card>
      ) : (
        <div className="flex flex-col gap-3">
          {servicios.map((s) => (
            <Card key={s.id}>
              <div className="flex items-center justify-between flex-wrap gap-3">
                <div>
                  <p className={`font-semibold ${s.activo ? "text-gray-800" : "text-gray-400 line-through"}`}>
                    {s.nombre}
                  </p>
                  <p className="text-sm text-gray-500 mt-0.5">
                    {s.duracionHoras} {s.duracionHoras === 1 ? "hora" : "horas"}
                    {!s.activo && " · inactivo"}
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button variant="secondary" className="text-sm" onClick={() => editarDuracion(s)}>
                    Duración
                  </Button>
                  <Button variant="secondary" className="text-sm" onClick={() => toggleActivo(s)}>
                    {s.activo ? "Desactivar" : "Activar"}
                  </Button>
                  <Button variant="danger" className="text-sm" onClick={() => eliminar(s)}>
                    Eliminar
                  </Button>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}