import { useState } from 'react';
import { ChevronDown, Search, Filter, MoreVertical, Plus, Users, TrendingUp, Home as HomeIcon } from 'lucide-react';
import BreadCrumb from '../../components/BreadCrumb';

export default function Customers({ user }) {
  const [searchQuery, setSearchQuery] = useState('');

  const customers = [
    {
      id: 1,
      name: 'Rajesh Kumar',
      phone: '+91 98765 43210',
      avatar: 'RK',
      balance: 45000,
      type: 'credit',
      status: 'Active',
      statusColor: 'bg-green-100 text-green-700',
      transactions: 24
    },
    {
      id: 2,
      name: 'Priya Sharma',
      phone: '+91 98765 43211',
      avatar: 'PS',
      balance: 8500,
      type: 'debit',
      status: 'Active',
      statusColor: 'bg-green-100 text-green-700',
      transactions: 18
    },
    {
      id: 3,
      name: 'Amit Patel',
      phone: '+91 98765 43212',
      avatar: 'AP',
      balance: 22000,
      type: 'credit',
      status: 'Active',
      statusColor: 'bg-green-100 text-green-700',
      transactions: 32
    },
    {
      id: 4,
      name: 'Sneha Reddy',
      phone: '+91 98765 43213',
      avatar: 'SR',
      balance: 5000,
      type: 'debit',
      status: 'Pending',
      statusColor: 'bg-yellow-100 text-yellow-700',
      transactions: 12
    },
    {
      id: 5,
      name: 'Vikram Singh',
      phone: '+91 98765 43214',
      avatar: 'VS',
      balance: 15000,
      type: 'credit',
      status: 'Active',
      statusColor: 'bg-green-100 text-green-700',
      transactions: 28
    },
    {
      id: 6,
      name: 'Anjali Gupta',
      phone: '+91 98765 43215',
      avatar: 'AG',
      balance: 3200,
      type: 'debit',
      status: 'Active',
      statusColor: 'bg-green-100 text-green-700',
      transactions: 9
    },
  ];

  const totalCredit = customers.filter(c => c.type === 'credit').reduce((sum, c) => sum + c.balance, 0);
  const totalDebit = customers.filter(c => c.type === 'debit').reduce((sum, c) => sum + c.balance, 0);

  const breadcrumbItems = [
    { icon: <HomeIcon />, label: 'Home', path: '/dashboard', active: false },
    { icon: <Users />, label: 'Customers', path: '/customers', active: true }
  ];

  return (
    <div>
      {/* Header */}
      <div className='relative'>
        <BreadCrumb items={breadcrumbItems} showUser={true} />
      </div>
      {/* Summary Cards */}
      <div className="grid grid-cols-4 gap-5 mb-8">
        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
          <div className="flex items-center justify-between mb-4">
            <div className="text-sm text-gray-500 font-medium">Total Customers</div>
            <div className="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center">
              <Users className="w-5 h-5 text-purple-600" />
            </div>
          </div>
          <div className="text-3xl font-bold text-gray-900 mb-2">{customers.length}</div>
          <div className="flex items-center gap-1 text-xs text-green-600 font-semibold">
            <TrendingUp className="w-3.5 h-3.5" />
            +12% from last month
          </div>
        </div>
        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
          <div className="text-sm text-gray-500 font-medium mb-4">Total Receivable</div>
          <div className="text-3xl font-bold text-green-600 mb-2">₹{totalCredit.toLocaleString()}</div>
          <div className="text-xs text-gray-600 font-medium">From {customers.filter(c => c.type === 'credit').length} customers</div>
        </div>
        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
          <div className="text-sm text-gray-500 font-medium mb-4">Total Payable</div>
          <div className="text-3xl font-bold text-red-600 mb-2">₹{totalDebit.toLocaleString()}</div>
          <div className="text-xs text-gray-600 font-medium">To {customers.filter(c => c.type === 'debit').length} customers</div>
        </div>
        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
          <div className="text-sm text-gray-500 font-medium mb-4">Active Customers</div>
          <div className="text-3xl font-bold text-gray-900 mb-2">{customers.filter(c => c.status === 'Active').length}</div>
          <div className="text-xs text-blue-600 font-semibold">{customers.filter(c => c.status === 'Pending').length} pending</div>
        </div>
      </div>

      {/* Customers Table */}
      <div className="bg-white rounded-2xl border border-gray-200 shadow-sm">
        <div className="p-6 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-bold text-gray-900 mb-1">Customer Directory</h2>
              <p className="text-sm text-gray-500">Manage and view all your customer details</p>
            </div>
            <button className="flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-[#FF6B00] to-[#FF8534] text-white rounded-xl text-sm font-semibold hover:shadow-lg transition-all">
              <Plus className="w-4 h-4" />
              Add Customer
            </button>
          </div>
        </div>

        <div className="p-6 border-b border-gray-200 bg-gray-50">
          <div className="flex items-center gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
              <input
                type="text"
                placeholder="Search for customers by name or phone..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#FF6B00] focus:border-transparent"
              />
            </div>
            <button className="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm font-medium hover:bg-gray-50 transition-colors">
              <Filter className="w-4 h-4 text-gray-600" />
              <span>Filter</span>
              <ChevronDown className="w-4 h-4 text-gray-600" />
            </button>
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Customer
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Phone
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Balance
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Type
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Transactions
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-4"></th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {customers.map((customer) => (
                <tr key={customer.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-xl flex items-center justify-center text-white text-sm font-semibold shadow-md">
                        {customer.avatar}
                      </div>
                      <span className="text-sm font-medium text-gray-900">{customer.name}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                    {customer.phone}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`text-sm font-bold ${customer.type === 'credit' ? 'text-green-600' : 'text-red-600'}`}>
                      ₹{customer.balance.toLocaleString()}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${customer.type === 'credit'
                      ? 'bg-green-100 text-green-700'
                      : 'bg-red-100 text-red-700'
                      }`}>
                      {customer.type === 'credit' ? 'You will get' : 'You will give'}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    {customer.transactions}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${customer.statusColor}`}>
                      {customer.status}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-right">
                    <button className="text-gray-400 hover:text-gray-600 transition-colors">
                      <MoreVertical className="w-5 h-5" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}