import React, { useState, useEffect } from 'react';
import { Users, ShieldAlert, Eye, Power, Search, ShoppingBag } from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

export default function CustomerManager() {
  const [customers, setCustomers] = useState<any[]>([]);
  const [search, setSearch] = useState('');
  const [selectedCustomer, setSelectedCustomer] = useState<any>(null);
  const [orders, setOrders] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

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

  const fetchCustomers = async () => {
    setLoading(true);
    try {
      const res = await api.get('/admin/customers');
      setCustomers(res.data?.data?.customers || []);
    } catch (err: any) {
      showToast('Failed to load customers list', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleToggleStatus = async (customer: any) => {
    try {
      const res = await api.post(`/admin/customers/${customer.id}/toggle`);
      showToast(`User status toggled successfully`, 'success');
      fetchCustomers();
      if (selectedCustomer?.id === customer.id) {
        handleViewDetails(customer);
      }
    } catch (err: any) {
      showToast('Status update failed', 'error');
    }
  };

  const handleViewDetails = async (customer: any) => {
    try {
      const res = await api.get(`/admin/customers/${customer.id}`);
      setSelectedCustomer(res.data?.data?.customer);
      setOrders(res.data?.data?.customer?.orders || []);
    } catch (err: any) {
      showToast('Failed to load user order logs', 'error');
    }
  };

  const filtered = customers.filter((c) => {
    const query = search.toLowerCase();
    return (
      c.firstName.toLowerCase().includes(query) ||
      c.lastName.toLowerCase().includes(query) ||
      c.email.toLowerCase().includes(query)
    );
  });

  return (
    <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-6 sm:p-8 space-y-6 shadow-sm">
      <div className="border-b border-zinc-100 dark:border-zinc-800 pb-4">
        <h2 className="text-xl font-extrabold flex items-center gap-2">
          <Users className="w-5.5 h-5.5 text-[#701a08]" /> Customers & CRM Registry
        </h2>
        <p className="text-xs text-zinc-500 mt-1">
          Suspend or activate accounts, review total orders history, and inspect user profiles.
        </p>
      </div>

      <div className="flex gap-2 max-w-md bg-zinc-50 dark:bg-zinc-800 p-2.5 rounded-xl border border-zinc-200 dark:border-zinc-700">
        <Search className="w-4 h-4 text-zinc-400 shrink-0 self-center" />
        <input
          type="text"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Filter customers by name or email address..."
          className="w-full text-xs bg-transparent focus:outline-none text-zinc-800 dark:text-zinc-200"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Customers Table Column */}
        <div className="lg:col-span-2 overflow-x-auto border border-zinc-200 dark:border-zinc-800 rounded-2xl">
          <table className="w-full text-xs font-semibold text-left">
            <thead className="bg-zinc-50 dark:bg-zinc-850 border-b border-zinc-200 dark:border-zinc-800 text-[10px] uppercase font-bold text-zinc-400">
              <tr>
                <th className="p-4">Customer Name</th>
                <th className="p-4">Email</th>
                <th className="p-4">Status</th>
                <th className="p-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((c) => (
                <tr key={c.id} className="border-b border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50/50">
                  <td className="p-4 font-bold text-zinc-900 dark:text-zinc-100">{c.firstName} {c.lastName}</td>
                  <td className="p-4 font-mono text-zinc-500">{c.email}</td>
                  <td className="p-4">
                    <span className={`px-2 py-0.5 rounded text-[10px] font-extrabold uppercase ${
                      c.status === 'ACTIVE'
                        ? 'bg-green-100 text-green-800'
                        : 'bg-red-100 text-red-800'
                    }`}>
                      {c.status}
                    </span>
                  </td>
                  <td className="p-4 flex gap-2">
                    <button
                      onClick={() => handleViewDetails(c)}
                      className="p-1.5 rounded bg-zinc-100 hover:bg-zinc-200 text-zinc-600"
                    >
                      <Eye className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => handleToggleStatus(c)}
                      className={`p-1.5 rounded text-white ${
                        c.status === 'SUSPENDED' ? 'bg-green-600 hover:bg-green-700' : 'bg-red-600 hover:bg-red-700'
                      }`}
                    >
                      <Power className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Selected Customer Details / Order History Column */}
        <div className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-800 h-fit space-y-5">
          {selectedCustomer ? (
            <div className="space-y-4">
              <h3 className="font-extrabold text-sm border-b border-zinc-250 pb-2">Customer Profile</h3>
              <div className="space-y-2 text-xs font-semibold text-zinc-600 dark:text-zinc-400">
                <div>
                  <span className="text-[10px] uppercase font-bold text-zinc-400 block">Name</span>
                  <span className="text-zinc-900 dark:text-zinc-100">{selectedCustomer.firstName} {selectedCustomer.lastName}</span>
                </div>
                <div>
                  <span className="text-[10px] uppercase font-bold text-zinc-400 block">Email</span>
                  <span className="text-zinc-900 dark:text-zinc-100 font-mono">{selectedCustomer.email}</span>
                </div>
                <div>
                  <span className="text-[10px] uppercase font-bold text-zinc-400 block">Joined Date</span>
                  <span>{new Date(selectedCustomer.createdAt).toLocaleDateString()}</span>
                </div>
              </div>

              <h4 className="font-extrabold text-[11px] uppercase tracking-wider text-zinc-400 border-b pb-1 flex items-center gap-1">
                <ShoppingBag className="w-3.5 h-3.5" /> Order History ({orders.length})
              </h4>
              <div className="max-h-[220px] overflow-y-auto space-y-2">
                {orders.length === 0 ? (
                  <span className="text-[11px] text-zinc-400 font-medium block">No orders submitted by user.</span>
                ) : (
                  orders.map((o) => (
                    <div key={o.id} className="p-2.5 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 flex justify-between items-center text-[10px]">
                      <div>
                        <span className="font-extrabold text-zinc-900 dark:text-zinc-100 block">{o.orderNumber}</span>
                        <span className="text-zinc-400 font-semibold">{new Date(o.createdAt).toLocaleDateString()}</span>
                      </div>
                      <span className="font-extrabold text-[#701a08]">₹{Number(o.grandTotal)}</span>
                    </div>
                  ))
                )}
              </div>
            </div>
          ) : (
            <div className="text-center py-10 text-zinc-400 font-bold text-xs flex flex-col items-center gap-2">
              <ShieldAlert className="w-8 h-8 text-zinc-300" />
              Select a customer profile to view registration details and order history logs.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}