"use client";

import { useState, useEffect, useCallback } from "react";
import { Plus, Search, Mail, Phone, Building2, Trash2, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  fetchCustomers,
  createCustomer,
  deleteCustomer,
  getUserRole,
  type Customer,
} from "@/lib/supabase/customers-actions";
import PageSkeleton from "./PageSkeleton";

export default function ClientsPage() {
  const [clients, setClients] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [userRole, setUserRole] = useState("employee");

  const [formName, setFormName] = useState("");
  const [formEmail, setFormEmail] = useState("");
  const [formPhone, setFormPhone] = useState("");
  const [formCompany, setFormCompany] = useState("");
  const [formAddress, setFormAddress] = useState("");
  const [formNotes, setFormNotes] = useState("");

  const canDelete = userRole === "owner" || userRole === "admin";

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchCustomers(search || undefined), getUserRole()])
      .then(([c, role]) => {
        if (!cancelled) {
          setClients(c);
          setUserRole(role);
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [search]);

  const handleSubmit = async () => {
    setError(null);
    if (!formName.trim()) { setError("Name is required"); return; }
    setSaving(true);
    try {
      const result = await createCustomer({
        name: formName,
        email: formEmail || undefined,
        phone: formPhone || undefined,
        company: formCompany || undefined,
        address: formAddress || undefined,
        notes: formNotes || undefined,
      });
      if (!result.success) { setError(result.error || "Failed"); return; }
      resetForm();
      const updated = await fetchCustomers(search || undefined);
      setClients(updated);
    } catch (e: any) {
      setError(e.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    const result = await deleteCustomer(id);
    if (result.success) setClients((prev) => prev.filter((c) => c.id !== id));
  };

  const resetForm = () => {
    setShowForm(false);
    setFormName("");
    setFormEmail("");
    setFormPhone("");
    setFormCompany("");
    setFormAddress("");
    setFormNotes("");
    setError(null);
  };

  if (loading) return <PageSkeleton name="Clients" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Clients</h1>
          <p className="text-gray-500 mt-1">Manage your client contacts</p>
        </div>
        <Button onClick={() => setShowForm(true)} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
          <Plus className="w-4 h-4" />
          Add client
        </Button>
      </div>

      {/* Search */}
      <div className="relative max-w-md">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Search clients..."
          className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
        />
      </div>

      {/* Add Client Form */}
      {showForm && (
        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6 space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold text-gray-900">New client</h3>
            <button onClick={resetForm} className="p-1 hover:bg-gray-100 rounded cursor-pointer">
              <X className="w-4 h-4 text-gray-400" />
            </button>
          </div>
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
          )}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">Name *</label>
              <input value={formName} onChange={(e) => setFormName(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                placeholder="John Smith" />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">Email</label>
              <input value={formEmail} onChange={(e) => setFormEmail(e.target.value)} type="email"
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                placeholder="john@example.com" />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">Phone</label>
              <input value={formPhone} onChange={(e) => setFormPhone(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                placeholder="+61 400 000 000" />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">Company</label>
              <input value={formCompany} onChange={(e) => setFormCompany(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                placeholder="Acme Corp" />
            </div>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-700">Address</label>
            <input value={formAddress} onChange={(e) => setFormAddress(e.target.value)}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              placeholder="123 Main St, Sydney NSW 2000" />
          </div>
          <div>
            <label className="text-sm font-medium text-gray-700">Notes</label>
            <textarea value={formNotes} onChange={(e) => setFormNotes(e.target.value)} rows={2}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
              placeholder="Optional notes..." />
          </div>
          <div className="flex justify-end gap-2 pt-2 border-t border-gray-100">
            <Button variant="outline" onClick={resetForm} className="cursor-pointer">Cancel</Button>
            <Button onClick={handleSubmit} disabled={saving} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
              {saving ? <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> : null}
              {saving ? "Saving..." : "Save"}
            </Button>
          </div>
        </div>
      )}

      {/* Client List */}
      {clients.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
          <Building2 className="w-8 h-8 text-gray-300 mb-3" />
          <p className="text-sm text-gray-500 font-medium">No clients yet</p>
          <p className="text-xs text-gray-400 mt-1 mb-4">Add your first client to get started</p>
          <Button onClick={() => setShowForm(true)} size="sm" className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
            <Plus className="w-3.5 h-3.5" />
            Add client
          </Button>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
          <div className="divide-y divide-gray-50">
            {clients.map((c) => (
              <div key={c.id} className="px-5 py-4 flex items-start justify-between hover:bg-gray-50/50 transition-colors">
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-semibold text-gray-900">{c.name}</p>
                  {c.company && <p className="text-xs text-gray-500 mt-0.5">{c.company}</p>}
                  <div className="flex flex-wrap gap-3 mt-2">
                    {c.email && (
                      <span className="inline-flex items-center gap-1 text-xs text-gray-500">
                        <Mail className="w-3 h-3" /> {c.email}
                      </span>
                    )}
                    {c.phone && (
                      <span className="inline-flex items-center gap-1 text-xs text-gray-500">
                        <Phone className="w-3 h-3" /> {c.phone}
                      </span>
                    )}
                  </div>
                </div>
                {canDelete && (
                  <button onClick={() => handleDelete(c.id)} className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors cursor-pointer flex-shrink-0">
                    <Trash2 className="w-4 h-4" />
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}