
import { Bell, HelpCircle, ChevronDown, TrendingUp, TrendingDown, Download, Clock, CheckCircle, XCircle, Send, ArrowDownLeft, Receipt, Users, Plus, MessageSquare, Filter, Search, Phone, ArrowUpRight, History, ChevronRight, IndianRupee } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

export default function Dashboard({ user }) {
  // Transaction Status Cards (Original Design)
  const statusCards = [
    { 
      label: 'Pending Payment', 
      count: 125, 
      change: '+8%', 
      positive: true,
      color: 'bg-orange-50',
      iconBg: 'bg-orange-100',
      iconColor: 'text-[#FF6B00]',
      icon: Clock,
      borderColor: 'border-orange-200'
    },
    { 
      label: 'Received', 
      count: 456, 
      change: '+12%', 
      positive: true,
      color: 'bg-green-50',
      iconBg: 'bg-green-100',
      iconColor: 'text-green-600',
      icon: ArrowDownLeft,
      borderColor: 'border-green-200'
    },
    { 
      label: 'Paid Out', 
      count: 234, 
      change: '+5%', 
      positive: true,
      color: 'bg-blue-50',
      iconBg: 'bg-blue-100',
      iconColor: 'text-blue-600',
      icon: Send,
      borderColor: 'border-blue-200'
    },
    { 
      label: 'Completed', 
      count: 892, 
      change: '+15%', 
      positive: true,
      color: 'bg-teal-50',
      iconBg: 'bg-teal-100',
      iconColor: 'text-teal-600',
      icon: CheckCircle,
      borderColor: 'border-teal-200'
    },
    { 
      label: 'Cancelled', 
      count: 23, 
      change: '-3%', 
      positive: false,
      color: 'bg-red-50',
      iconBg: 'bg-red-100',
      iconColor: 'text-red-600',
      icon: XCircle,
      borderColor: 'border-red-200'
    },
  ];

  // Customer Data
  const customers = [
    {
      id: 1,
      name: 'Deepa',
      phone: '98755 43210',
      avatar: 'D',
      balance: 800,
      type: 'credit',
      lastTransaction: 'Payment received',
      lastDate: 'Today, 2:30 PM',
      color: 'from-green-400 to-green-500',
      bgColor: 'bg-green-50',
      textColor: 'text-green-600'
    },
    {
      id: 2,
      name: 'Rakesh',
      phone: '98765 12345',
      avatar: 'R',
      balance: 500,
      type: 'debit',
      lastTransaction: 'Outstanding payment',
      lastDate: 'Yesterday, 5:00 PM',
      color: 'from-red-400 to-red-500',
      bgColor: 'bg-red-50',
      textColor: 'text-red-600'
    },
    {
      id: 3,
      name: 'Sunil',
      phone: '98755 67890',
      avatar: 'S',
      balance: 1200,
      type: 'debit',
      lastTransaction: 'Bought supplies',
      lastDate: '2 days ago',
      color: 'from-orange-400 to-orange-500',
      bgColor: 'bg-orange-50',
      textColor: 'text-orange-600'
    },
    {
      id: 4,
      name: 'Priya',
      phone: '98755 11111',
      avatar: 'P',
      balance: 2500,
      type: 'credit',
      lastTransaction: 'Invoice paid',
      lastDate: '3 days ago',
      color: 'from-blue-400 to-blue-500',
      bgColor: 'bg-blue-50',
      textColor: 'text-blue-600'
    },
    {
      id: 5,
      name: 'Karthik',
      phone: '98755 22222',
      avatar: 'K',
      balance: 1500,
      type: 'credit',
      lastTransaction: 'Payment sent',
      lastDate: '4 days ago',
      color: 'from-purple-400 to-purple-500',
      bgColor: 'bg-purple-50',
      textColor: 'text-purple-600'
    },
    {
      id: 6,
      name: 'Anjali',
      phone: '98755 33333',
      avatar: 'A',
      balance: 350,
      type: 'debit',
      lastTransaction: 'Pending payment',
      lastDate: '5 days ago',
      color: 'from-pink-400 to-pink-500',
      bgColor: 'bg-pink-50',
      textColor: 'text-pink-600'
    },
  ];

  const totalReceivable = customers.filter(c => c.type === 'credit').reduce((sum, c) => sum + c.balance, 0);
  const totalPayable = customers.filter(c => c.type === 'debit').reduce((sum, c) => sum + c.balance, 0);
  const netBalance = totalReceivable - totalPayable;

  const chartData = [
    { month: 'Jan', income: 45000, expense: 32000 },
    { month: 'Feb', income: 52000, expense: 38000 },
    { month: 'Mar', income: 48000, expense: 35000 },
    { month: 'Apr', income: 61000, expense: 42000 },
    { month: 'May', income: 55000, expense: 39000 },
    { month: 'Jun', income: 67000, expense: 45000 },
  ];

  return (
    <div>
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 mb-1">
            Morning, {user.name}! 👋
          </h1>
          <p className="text-gray-500 text-sm">Here's your business overview</p>
        </div>
        <div className="flex items-center gap-3">
          <button className="p-2.5 hover:bg-gray-100 rounded-xl transition-all">
            <HelpCircle className="w-5 h-5 text-gray-600" />
          </button>
          <button className="p-2.5 hover:bg-gray-100 rounded-xl transition-all relative">
            <Bell className="w-5 h-5 text-gray-600" />
            <span className="absolute top-2 right-2 w-2 h-2 bg-[#FF6B00] rounded-full"></span>
          </button>
          <button className="flex items-center gap-2.5 hover:bg-gray-100 rounded-xl px-3 py-2 transition-all">
            <div className="w-9 h-9 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-full flex items-center justify-center text-white text-sm font-semibold shadow-lg">
              {user.avatar}
            </div>
            <span className="text-sm font-medium text-gray-900">{user.name}</span>
            <ChevronDown className="w-4 h-4 text-gray-600" />
          </button>
        </div>
      </div>

      {/* Transaction Summary Cards (Original Design) */}
      <div>
        <h2 className="text-xl font-bold text-gray-900 mb-5">Transaction Summary</h2>
        <div className="grid grid-cols-5 gap-5 mb-8">
          {statusCards.map((card, index) => {
            const IconComponent = card.icon;
            return (
              <div 
                key={index} 
                className={`${card.color} rounded-2xl p-6 border ${card.borderColor} hover:shadow-lg transition-all duration-200 cursor-pointer`}
              >
                <div className="flex items-start justify-between mb-4">
                  <div className={`w-12 h-12 ${card.iconBg} rounded-xl flex items-center justify-center`}>
                    <IconComponent className={`w-6 h-6 ${card.iconColor}`} strokeWidth={2.5} />
                  </div>
                </div>
                <div className="mb-2 text-sm font-medium text-gray-600">{card.label}</div>
                <div className="flex items-end justify-between mb-3">
                  <span className="text-3xl font-bold text-gray-900">{card.count}</span>
                  <div className={`flex items-center gap-1 text-sm font-semibold ${card.positive ? 'text-green-600' : 'text-red-600'}`}>
                    {card.positive ? (
                      <TrendingUp className="w-4 h-4" strokeWidth={2.5} />
                    ) : (
                      <TrendingDown className="w-4 h-4" strokeWidth={2.5} />
                    )}
                    <span>{card.change}</span>
                  </div>
                </div>
                <button className="text-xs text-gray-500 hover:text-[#FF6B00] font-medium flex items-center gap-1.5 transition-colors">
                  <Download className="w-3.5 h-3.5" />
                  Download report
                </button>
              </div>
            );
          })}
        </div>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        {/* Green Book - You Will Get */}
        <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
          <div className="relative">
            <div className="flex items-center gap-2 mb-2">
              <ArrowDownLeft className="w-5 h-5" />
              <span className="text-sm font-medium opacity-90">You Will Get</span>
            </div>
            <div className="text-4xl font-bold mb-1">₹{totalReceivable.toLocaleString()}</div>
            <div className="text-sm opacity-80">{customers.filter(c => c.type === 'credit').length} customers</div>
          </div>
        </div>

        {/* Red Book - You Will Give */}
        <div className="bg-gradient-to-br from-red-500 to-red-600 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
          <div className="relative">
            <div className="flex items-center gap-2 mb-2">
              <ArrowUpRight className="w-5 h-5" />
              <span className="text-sm font-medium opacity-90">You Will Give</span>
            </div>
            <div className="text-4xl font-bold mb-1">₹{totalPayable.toLocaleString()}</div>
            <div className="text-sm opacity-80">{customers.filter(c => c.type === 'debit').length} customers</div>
          </div>
        </div>

        {/* Net Balance */}
        <div className="bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-2xl p-6 text-white shadow-xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
          <div className="relative">
            <div className="flex items-center gap-2 mb-2">
              <IndianRupee className="w-5 h-5" />
              <span className="text-sm font-medium opacity-90">Net Balance</span>
            </div>
            <div className="text-4xl font-bold mb-1">₹{netBalance.toLocaleString()}</div>
            <div className="text-sm opacity-80 flex items-center gap-1">
              <TrendingUp className="w-3.5 h-3.5" />
              Overall balance
            </div>
          </div>
        </div>
      </div>

      {/* Main Content - Customer Ledger + Sidebar */}
      <div className="grid grid-cols-3 gap-6 mb-8">
        {/* Customer List */}
        <div className="col-span-2">
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
            {/* Header */}
            <div className="p-5 border-b border-gray-100">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <h2 className="text-lg font-bold text-gray-900">Customer Ledger</h2>
                  <p className="text-xs text-gray-500 mt-0.5">Track all your transactions</p>
                </div>
                <div className="flex items-center gap-2">
                  <button className="flex items-center gap-2 px-4 py-2 bg-[#FF6B00] text-white rounded-lg text-sm font-semibold hover:bg-[#FF8534] transition-all shadow-md">
                    <Plus className="w-4 h-4" />
                    Add Entry
                  </button>
                </div>
              </div>
              
              {/* Search & Filter */}
              <div className="flex items-center gap-2">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="Search customers..."
                    className="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#FF6B00] focus:border-transparent"
                  />
                </div>
                <button className="p-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-all">
                  <Filter className="w-4 h-4 text-gray-600" />
                </button>
              </div>
            </div>

            {/* Customer Cards */}
            <div className="p-4 space-y-3 max-h-[500px] overflow-y-auto">
              {customers.map((customer) => (
                <div 
                  key={customer.id}
                  className={`${customer.bgColor} rounded-xl p-4 border-2 ${customer.type === 'credit' ? 'border-green-200' : 'border-red-200'} hover:shadow-md transition-all cursor-pointer`}
                >
                  <div className="flex items-start justify-between">
                    {/* Customer Info */}
                    <div className="flex items-center gap-3 flex-1">
                      <div className={`w-14 h-14 bg-gradient-to-br ${customer.color} rounded-full flex items-center justify-center text-white text-xl font-bold shadow-lg`}>
                        {customer.avatar}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-bold text-gray-900 text-base">{customer.name}</h3>
                          <span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${customer.type === 'credit' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                            {customer.type === 'credit' ? 'GET' : 'GIVE'}
                          </span>
                        </div>
                        <div className="flex items-center gap-1 text-xs text-gray-500 mb-1">
                          <Phone className="w-3 h-3" />
                          {customer.phone}
                        </div>
                        <div className="flex items-center gap-1 text-xs text-gray-400">
                          <History className="w-3 h-3" />
                          {customer.lastTransaction} • {customer.lastDate}
                        </div>
                      </div>
                    </div>

                    {/* Balance */}
                    <div className="text-right">
                      <div className={`text-3xl font-bold ${customer.type === 'credit' ? 'text-green-600' : 'text-red-600'} mb-1`}>
                        ₹{customer.balance.toLocaleString()}
                      </div>
                      <div className={`text-xs font-semibold ${customer.textColor}`}>
                        {customer.type === 'credit' ? 'You\'ll Get' : 'You\'ll Give'}
                      </div>
                    </div>
                  </div>

                  {/* Action Buttons */}
                  <div className="flex items-center gap-2 mt-4 pt-3 border-t border-gray-200">
                    <button className="flex-1 flex items-center justify-center gap-1.5 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all">
                      <Plus className="w-4 h-4" />
                      Add Entry
                    </button>
                    <button className="flex-1 flex items-center justify-center gap-1.5 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all">
                      <MessageSquare className="w-4 h-4" />
                      Remind
                    </button>
                    <button className="flex items-center justify-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all">
                      <ChevronRight className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Sidebar - Quick Actions & Stats */}
        <div className="space-y-4">
          {/* Quick Actions */}
          <div className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <h3 className="font-bold text-gray-900 mb-4 text-sm">Quick Actions</h3>
            <div className="space-y-2">
              <button className="w-full flex items-center gap-3 p-3 bg-gradient-to-r from-green-50 to-green-100 text-green-700 rounded-xl font-semibold text-sm hover:shadow-md transition-all">
                <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
                  <Plus className="w-4 h-4 text-white" />
                </div>
                Gave Money
              </button>
              <button className="w-full flex items-center gap-3 p-3 bg-gradient-to-r from-red-50 to-red-100 text-red-700 rounded-xl font-semibold text-sm hover:shadow-md transition-all">
                <div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
                  <Plus className="w-4 h-4 text-white" />
                </div>
                Got Money
              </button>
              <button className="w-full flex items-center gap-3 p-3 bg-gradient-to-r from-blue-50 to-blue-100 text-blue-700 rounded-xl font-semibold text-sm hover:shadow-md transition-all">
                <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
                  <Users className="w-4 h-4 text-white" />
                </div>
                Add Customer
              </button>
            </div>
          </div>

          {/* Total Customers */}
          <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-5 text-white shadow-lg">
            <div className="flex items-center gap-2 mb-2">
              <Users className="w-5 h-5" />
              <span className="text-sm font-medium opacity-90">Total Customers</span>
            </div>
            <div className="text-3xl font-bold">{customers.length}</div>
          </div>

          {/* Recent Activity */}
          <div className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <h3 className="font-bold text-gray-900 mb-4 text-sm">Recent Activity</h3>
            <div className="space-y-3">
              <div className="flex items-start gap-2">
                <div className="w-2 h-2 bg-green-500 rounded-full mt-1.5"></div>
                <div className="flex-1">
                  <p className="text-xs font-medium text-gray-900">Payment received</p>
                  <p className="text-xs text-gray-500">₹800 from Deepa</p>
                  <p className="text-xs text-gray-400 mt-0.5">2 hours ago</p>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-2 h-2 bg-red-500 rounded-full mt-1.5"></div>
                <div className="flex-1">
                  <p className="text-xs font-medium text-gray-900">Payment due</p>
                  <p className="text-xs text-gray-500">₹500 to Rakesh</p>
                  <p className="text-xs text-gray-400 mt-0.5">Yesterday</p>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-2 h-2 bg-blue-500 rounded-full mt-1.5"></div>
                <div className="flex-1">
                  <p className="text-xs font-medium text-gray-900">Customer added</p>
                  <p className="text-xs text-gray-500">Priya added</p>
                  <p className="text-xs text-gray-400 mt-0.5">3 days ago</p>
                </div>
              </div>
            </div>
          </div>

          {/* Reminders */}
          <div className="bg-yellow-50 rounded-2xl p-5 border-2 border-yellow-200">
            <div className="flex items-center gap-2 mb-3">
              <Bell className="w-5 h-5 text-yellow-600" />
              <h3 className="font-bold text-yellow-900 text-sm">Reminders</h3>
            </div>
            <p className="text-xs text-yellow-800 mb-2">3 pending reminders to send</p>
            <button className="w-full py-2 bg-yellow-500 text-white rounded-lg text-xs font-semibold hover:bg-yellow-600 transition-all">
              Send All Reminders
            </button>
          </div>
        </div>
      </div>

      {/* Financial Overview Chart (Original Design) */}
      <div className="bg-white rounded-2xl p-7 border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-xl font-bold text-gray-900 mb-1">Financial Overview</h2>
            <p className="text-sm text-gray-500">Monthly income vs expense comparison</p>
          </div>
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-[#27AE60] rounded-full"></div>
              <div className="text-right">
                <div className="text-xs text-gray-500 font-medium">Total Income</div>
                <div className="text-lg font-bold text-[#27AE60]">₹ 3,28,000</div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-[#EB5757] rounded-full"></div>
              <div className="text-right">
                <div className="text-xs text-gray-500 font-medium">Total Expense</div>
                <div className="text-lg font-bold text-[#EB5757]">₹ 2,31,000</div>
              </div>
            </div>
          </div>
        </div>
        <ResponsiveContainer width="100%" height={320}>
          <BarChart data={chartData} barGap={8}>
            <CartesianGrid strokeDasharray="3 3" stroke="#F0F0F0" vertical={false} />
            <XAxis 
              dataKey="month" 
              axisLine={false}
              tickLine={false}
              tick={{ fill: '#6B7280', fontSize: 13, fontWeight: 500 }}
            />
            <YAxis 
              axisLine={false}
              tickLine={false}
              tick={{ fill: '#6B7280', fontSize: 13, fontWeight: 500 }}
              tickFormatter={(value) => `₹${value/1000}k`}
            />
            <Tooltip 
              cursor={{ fill: '#F9FAFB' }}
              contentStyle={{ 
                borderRadius: '12px', 
                border: '1px solid #E5E7EB',
                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
                fontWeight: 600
              }}
            />
            <Legend 
              wrapperStyle={{ paddingTop: '20px' }}
              iconType="circle"
            />
            <Bar dataKey="income" fill="#27AE60" radius={[8, 8, 0, 0]} name="Income" />
            <Bar dataKey="expense" fill="#EB5757" radius={[8, 8, 0, 0]} name="Expense" />
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* Quick Stats (Original Design) */}
      <div className="grid grid-cols-3 gap-5">
        <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">248</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="flex items-center justify-between mb-4">
            <div className="text-sm text-gray-500 font-medium">Active Transactions</div>
            <div className="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
              <Receipt className="w-5 h-5 text-blue-600" />
            </div>
          </div>
          <div className="text-3xl font-bold text-gray-900 mb-2">89</div>
          <div className="text-xs text-blue-600 font-semibold">23 pending approval</div>
        </div>
        <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">Net Balance</div>
            <div className="w-10 h-10 bg-green-50 rounded-xl flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-green-600" />
            </div>
          </div>
          <div className="text-3xl font-bold text-gray-900 mb-2">₹ 97,000</div>
          <div className="flex items-center gap-1 text-xs text-green-600 font-semibold">
            <CheckCircle className="w-3.5 h-3.5" />
            Positive cashflow
          </div>
        </div>
      </div>
    </div>
  );
}
