"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";

interface Client {
  id: string;
  name: string;
  email: string | null;
  hourlyRate: number;
  currency: string;
  _count?: { entries: number };
}

export function ClientsManager({ initial }: { initial: Client[] }) {
  const router = useRouter();
  const [clients, setClients] = useState<Client[]>(initial);
  const [showAdd, setShowAdd] = useState(false);
  const [edit, setEdit] = useState<Client | null>(null);

  async function refresh() {
    router.refresh();
  }

  async function create(data: Partial<Client>) {
    const res = await fetch("/api/proxy/clients", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      const c = await res.json();
      setClients((cs) => {
        const exists = cs.find((x) => x.id === c.id);
        return exists ? cs.map((x) => (x.id === c.id ? c : x)) : [...cs, c];
      });
      setShowAdd(false);
      refresh();
    }
  }

  async function update(id: string, data: Partial<Client>) {
    const res = await fetch(`/api/proxy/clients/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      const c = await res.json();
      setClients((cs) => cs.map((x) => (x.id === id ? { ...x, ...c } : x)));
      setEdit(null);
    }
  }

  async function remove(id: string) {
    if (!confirm("Delete this client and ALL its entries?")) return;
    const res = await fetch(`/api/proxy/clients/${id}`, { method: "DELETE" });
    if (res.ok) setClients((cs) => cs.filter((x) => x.id !== id));
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <button onClick={() => setShowAdd(true)} className="bg-accent-500 hover:bg-accent-400 text-ink-950 font-bold px-4 py-2 rounded-lg text-sm">
          + New client
        </button>
      </div>

      {clients.length === 0 ? (
        <div className="bg-ink-800/50 border border-white/10 rounded-xl p-10 text-center text-white/50">
          <div className="text-4xl mb-3">👥</div>
          <p className="mb-1">No clients yet.</p>
          <p className="text-xs">When you log time via Telegram, clients are created automatically.</p>
        </div>
      ) : (
        <div className="space-y-2">
          {clients.map((c) => (
            <div key={c.id} className="bg-ink-800/50 border border-white/10 rounded-lg p-4 flex items-center gap-4">
              <div className="flex-1 min-w-0">
                <div className="font-semibold">{c.name}</div>
                <div className="text-xs text-white/40">
                  {c.email || "no email"} · ${c.hourlyRate}/h {c.currency}
                  {c._count?.entries ? ` · ${c._count.entries} entries` : ""}
                </div>
              </div>
              <button onClick={() => setEdit(c)} className="text-sm text-white/70 hover:text-white px-3 py-1 rounded hover:bg-ink-700">Edit</button>
              <button onClick={() => remove(c.id)} className="text-white/30 hover:text-red-400 px-2">✕</button>
            </div>
          ))}
        </div>
      )}

      {showAdd && <EditModal title="New client" onClose={() => setShowAdd(false)} onSave={create} />}
      {edit && <EditModal title={`Edit ${edit.name}`} initial={edit} onClose={() => setEdit(null)} onSave={(data) => update(edit.id, data)} />}
    </div>
  );
}

function EditModal({
  title, initial, onClose, onSave,
}: {
  title: string;
  initial?: Client;
  onClose: () => void;
  onSave: (data: Partial<Client>) => void | Promise<void>;
}) {
  const [name, setName] = useState(initial?.name ?? "");
  const [email, setEmail] = useState(initial?.email ?? "");
  const [hourlyRate, setHourlyRate] = useState(String(initial?.hourlyRate ?? 0));
  const [currency, setCurrency] = useState(initial?.currency ?? "USD");

  return (
    <div className="fixed inset-0 z-50 bg-black/70 grid place-items-center px-6" onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} className="bg-ink-900 border border-white/10 rounded-2xl p-6 max-w-md w-full">
        <h2 className="text-xl font-bold mb-4">{title}</h2>
        <div className="space-y-3 mb-6">
          <div>
            <label className="text-xs uppercase tracking-wide text-white/50 mb-1 block">Name</label>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Acme Inc."
              className="w-full px-3 py-2 bg-ink-800 border border-white/10 rounded-lg focus:border-accent-500 focus:outline-none" />
          </div>
          <div>
            <label className="text-xs uppercase tracking-wide text-white/50 mb-1 block">Email (for invoices)</label>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="ar@acme.com"
              className="w-full px-3 py-2 bg-ink-800 border border-white/10 rounded-lg focus:border-accent-500 focus:outline-none" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs uppercase tracking-wide text-white/50 mb-1 block">Hourly rate</label>
              <input type="number" min="0" step="0.01" value={hourlyRate} onChange={(e) => setHourlyRate(e.target.value)}
                className="w-full px-3 py-2 bg-ink-800 border border-white/10 rounded-lg focus:border-accent-500 focus:outline-none" />
            </div>
            <div>
              <label className="text-xs uppercase tracking-wide text-white/50 mb-1 block">Currency</label>
              <input value={currency} onChange={(e) => setCurrency(e.target.value)}
                className="w-full px-3 py-2 bg-ink-800 border border-white/10 rounded-lg focus:border-accent-500 focus:outline-none" />
            </div>
          </div>
        </div>
        <div className="flex gap-2">
          <button onClick={onClose} className="flex-1 py-2.5 rounded-lg bg-ink-700 hover:bg-ink-600 text-sm font-semibold">Cancel</button>
          <button onClick={() => onSave({ name, email: email || undefined, hourlyRate: Number(hourlyRate), currency })}
            className="flex-1 py-2.5 rounded-lg bg-accent-500 hover:bg-accent-400 text-ink-950 text-sm font-bold">
            Save
          </button>
        </div>
      </div>
    </div>
  );
}