"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import DashboardLayout from "@/components/layout/DashboardLayout";
import AddCustomerModal from "@/components/customers/AddCustomerModal";
import { API_URL } from '@/lib/api';

interface Customer {
  id: number;
  customerCode: string;
  clinicName: string;
  doctorName: string;
  phone: string;
  email: string;
  city: string;
  emirate: string;
  clinicType: string;
  active: boolean;
}

export default function CustomersPage() {
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [showModal, setShowModal] = useState(false);

  function loadCustomers() {
    fetch(`${API_URL}/api/customers`)
      .then((res) => res.json())
      .then((data) => setCustomers(data))
      .catch((err) => console.error(err));
  }

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

  return (
    <DashboardLayout>
      {showModal && (
        <AddCustomerModal
          onClose={() => setShowModal(false)}
          onCustomerAdded={loadCustomers}
        />
      )}

      <div className="mb-8 flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold">Customers</h2>
          <p className="mt-1 text-slate-500">
            Manage clinics, hospitals, and customer accounts
          </p>
        </div>

        <button
          onClick={() => setShowModal(true)}
          className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white"
        >
          Add Customer
        </button>
      </div>

      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table className="w-full">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-5 py-4 text-left">Code</th>
              <th className="px-5 py-4 text-left">Clinic</th>
              <th className="px-5 py-4 text-left">Doctor</th>
              <th className="px-5 py-4 text-left">Phone</th>
              <th className="px-5 py-4 text-left">Emirate</th>
              <th className="px-5 py-4 text-left">Type</th>
              <th className="px-5 py-4 text-left">Status</th>
              <th className="px-5 py-4 text-left">Actions</th>
            </tr>
          </thead>

          <tbody>
            {customers.length === 0 ? (
              <tr>
                <td colSpan={8} className="px-5 py-16 text-center text-slate-500">
                  No customers found.
                </td>
              </tr>
            ) : (
              customers.map((customer) => (
                <tr
                  key={customer.id}
                  className="border-t border-slate-100 hover:bg-slate-50/50"
                >
                  <td className="px-5 py-4 font-semibold text-[#1296E8]">
                    {customer.customerCode}
                  </td>

                  <td className="px-5 py-4">
                    <div className="font-semibold text-slate-900">
                      {customer.clinicName}
                    </div>
                    <div className="text-xs text-slate-500">
                      {customer.customerCode}
                    </div>
                  </td>

                  <td className="px-5 py-4">{customer.doctorName || "-"}</td>
                  <td className="px-5 py-4">{customer.phone || "-"}</td>
                  <td className="px-5 py-4">{customer.emirate || "-"}</td>

                  <td className="px-5 py-4">
                    <span
                      className={`rounded-full px-3 py-1 text-xs font-semibold ${
                        customer.clinicType === "Dental Clinic"
                          ? "bg-blue-100 text-blue-700"
                          : customer.clinicType === "Hospital"
                          ? "bg-purple-100 text-purple-700"
                          : customer.clinicType === "University"
                          ? "bg-orange-100 text-orange-700"
                          : "bg-slate-100 text-slate-700"
                      }`}
                    >
                      {customer.clinicType || "Other"}
                    </span>
                  </td>

                  <td className="px-5 py-4">
                    <span
                      className={`rounded-full px-3 py-1 text-xs font-semibold ${
                        customer.active
                          ? "bg-green-100 text-green-700"
                          : "bg-slate-100 text-slate-600"
                      }`}
                    >
                      {customer.active ? "ACTIVE" : "INACTIVE"}
                    </span>
                  </td>

                  <td className="px-5 py-4">
                    <Link
                      href={`/customers/${customer.id}`}
                      className="rounded-lg border border-[#1296E8]/20 bg-[#1296E8]/5 px-4 py-2 text-sm font-semibold text-[#1296E8] transition hover:bg-[#1296E8]/10"
                    >
                      View
                    </Link>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </DashboardLayout>
  );
}