import { Bell, HelpCircle, ChevronDown, TrendingUp, TrendingDown, Download, Clock, CheckCircle, XCircle, Send, ArrowDownLeft, Receipt, Users } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import './Dashboard.scss';
import LedgerSection from '../../components/LedgerSection';
import Avatar from '../../components/Avatar';
import ProfileDropdown from '../../components/ProfileDropdown';

export default function Dashboard({ user }) {

  // Transaction Status Cards
  const statusCards = [
    {
      label: 'Pending Payment',
      count: 125,
      change: '+8%',
      positive: true,
      colorClass: 'orange',
      icon: Clock
    },
    {
      label: 'Received',
      count: 456,
      change: '+12%',
      positive: true,
      colorClass: 'green',
      icon: ArrowDownLeft
    },
    {
      label: 'Paid Out',
      count: 234,
      change: '+5%',
      positive: true,
      colorClass: 'blue',
      icon: Send
    },
    {
      label: 'Completed',
      count: 892,
      change: '+15%',
      positive: true,
      colorClass: 'teal',
      icon: CheckCircle
    },
    {
      label: 'Cancelled',
      count: 23,
      change: '-3%',
      positive: false,
      colorClass: 'red',
      icon: XCircle
    },
  ];

  // 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',
      history: [
        { id: 1, date: '02 Dec 2025', type: 'credit', amount: 500, note: 'Invoice payment', method: 'UPI' },
        { id: 2, date: '28 Nov 2025', type: 'debit', amount: 300, note: 'Product purchase', method: 'Cash' },
        { id: 3, date: '25 Nov 2025', type: 'credit', amount: 600, note: 'Service payment', method: 'Bank Transfer' },
        { id: 4, date: '20 Nov 2025', type: 'debit', amount: 200, note: 'Advance given', method: 'UPI' },
        { id: 5, date: '15 Nov 2025', type: 'credit', amount: 1000, note: 'Full settlement', method: 'Cash' }
      ]
    },
    {
      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',
      history: [
        { id: 1, date: '01 Dec 2025', type: 'debit', amount: 500, note: 'Product delivered', method: 'Pending' },
        { id: 2, date: '25 Nov 2025', type: 'credit', amount: 1000, note: 'Payment received', method: 'UPI' },
        { id: 3, date: '20 Nov 2025', type: 'debit', amount: 800, note: 'Supplies ordered', method: 'Cash' }
      ]
    },
    {
      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',
      history: [
        { id: 1, date: '30 Nov 2025', type: 'debit', amount: 1200, note: 'Bought supplies', method: 'Pending' },
        { id: 2, date: '22 Nov 2025', type: 'credit', amount: 500, note: 'Payment received', method: 'Cash' }
      ]
    },
    {
      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',
      history: [
        { id: 1, date: '29 Nov 2025', type: 'credit', amount: 2500, note: 'Invoice paid', method: 'Bank Transfer' },
        { id: 2, date: '15 Nov 2025', type: 'debit', amount: 1000, note: 'Purchase order', method: 'UPI' }
      ]
    },
    {
      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',
      history: [
        { id: 1, date: '28 Nov 2025', type: 'credit', amount: 1500, note: 'Payment sent', method: 'Cash' },
        { id: 2, date: '10 Nov 2025', type: 'debit', amount: 500, note: 'Advance payment', method: 'UPI' }
      ]
    },
    {
      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',
      history: [
        { id: 1, date: '27 Nov 2025', type: 'debit', amount: 350, note: 'Pending payment', method: 'Pending' }
      ]
    },
  ];

  // Supplier Data
  const suppliers = [
    {
      id: 1,
      name: 'ABC Materials',
      phone: '98700 11111',
      avatar: 'AM',
      balance: 15000,
      type: 'debit',
      lastTransaction: 'Material purchased',
      lastDate: 'Today, 10:00 AM',
      color: 'from-red-400 to-red-500',
      bgColor: 'bg-red-50',
      textColor: 'text-red-600',
      history: [
        { id: 1, date: '02 Dec 2025', type: 'debit', amount: 15000, note: 'Material purchased', method: 'Pending' },
        { id: 2, date: '20 Nov 2025', type: 'credit', amount: 10000, note: 'Payment made', method: 'Bank Transfer' }
      ]
    },
    {
      id: 2,
      name: 'Tech Supplies Co',
      phone: '98700 22222',
      avatar: 'TS',
      balance: 8500,
      type: 'debit',
      lastTransaction: 'Equipment bought',
      lastDate: 'Yesterday, 3:00 PM',
      color: 'from-orange-400 to-orange-500',
      bgColor: 'bg-orange-50',
      textColor: 'text-orange-600'
    },
    {
      id: 3,
      name: 'Global Traders',
      phone: '98700 33333',
      avatar: 'GT',
      balance: 22000,
      type: 'debit',
      lastTransaction: 'Bulk order',
      lastDate: '2 days ago',
      color: 'from-rose-400 to-rose-500',
      bgColor: 'bg-rose-50',
      textColor: 'text-rose-600'
    },
    {
      id: 4,
      name: 'Prime Wholesale',
      phone: '98700 44444',
      avatar: 'PW',
      balance: 5000,
      type: 'credit',
      lastTransaction: 'Return credit',
      lastDate: '3 days ago',
      color: 'from-blue-400 to-blue-500',
      bgColor: 'bg-blue-50',
      textColor: 'text-blue-600'
    },
    {
      id: 5,
      name: 'Metro Suppliers',
      phone: '98700 55555',
      avatar: 'MS',
      balance: 12000,
      type: 'debit',
      lastTransaction: 'Monthly payment',
      lastDate: '4 days ago',
      color: 'from-purple-400 to-purple-500',
      bgColor: 'bg-purple-50',
      textColor: 'text-purple-600'
    },
  ];

  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 className="dashboard">
      {/* Header */}
      <div className="header flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div className="header-content">
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-1">Morning, {user.name}! 👋</h1>
          <p className="text-sm text-gray-500">Here's your business overview</p>
        </div>
        <div  className='relative'>
          <ProfileDropdown top={`top-12`}/>
        </div>
      </div>

      {/* Transaction Summary Cards */}
      <div className="transaction-summary">
        <h2>Transaction Summary</h2>
        <div className="status-cards-grid">
          {statusCards.map((card, index) => {
            const IconComponent = card.icon;
            return (
              <div key={index} className={`status-card ${card.colorClass}`} style={{
                backgroundColor: card.colorClass === 'orange' ? '#FFF7ED' :
                  card.colorClass === 'green' ? '#F0FDF4' :
                    card.colorClass === 'blue' ? '#EFF6FF' :
                      card.colorClass === 'teal' ? '#F0FDFA' : '#FEF2F2',
                borderColor: card.colorClass === 'orange' ? '#FED7AA' :
                  card.colorClass === 'green' ? '#BBF7D0' :
                    card.colorClass === 'blue' ? '#BFDBFE' :
                      card.colorClass === 'teal' ? '#99F6E4' : '#FECACA'
              }}>
                <div className="card-header">
                  <div className="icon-wrapper" style={{
                    backgroundColor: card.colorClass === 'orange' ? '#FFEDD5' :
                      card.colorClass === 'green' ? '#DCFCE7' :
                        card.colorClass === 'blue' ? '#DBEAFE' :
                          card.colorClass === 'teal' ? '#CCFBF1' : '#FEE2E2'
                  }}>
                    <IconComponent style={{
                      color: card.colorClass === 'orange' ? '#FF6B00' :
                        card.colorClass === 'green' ? '#059669' :
                          card.colorClass === 'blue' ? '#2563EB' :
                            card.colorClass === 'teal' ? '#0D9488' : '#DC2626'
                    }} />
                  </div>
                </div>
                <div className="card-label">{card.label}</div>
                <div className="card-content">
                  <span className="count">{card.count}</span>
                  <div className={`trend ${card.positive ? 'positive' : 'negative'}`}>
                    {card.positive ? <TrendingUp /> : <TrendingDown />}
                    <span>{card.change}</span>
                  </div>
                </div>
                <button className="download-link">
                  <Download />
                  Download report
                </button>
              </div>
            );
          })}
        </div>
      </div>

      <LedgerSection customers={customers} suppliers={suppliers} />

      {/* Financial Overview Chart */}
      <div className="financial-overview">
        <div className="chart-header">
          <div className="chart-title">
            <h2>Financial Overview</h2>
            <p>Monthly income vs expense comparison</p>
          </div>
          <div className="chart-legend">
            <div className="legend-item">
              <div className="legend-dot income"></div>
              <div className="legend-text">
                <div className="label">Total Income</div>
                <div className="value income">₹ 3,28,000</div>
              </div>
            </div>
            <div className="legend-item">
              <div className="legend-dot expense"></div>
              <div className="legend-text">
                <div className="label">Total Expense</div>
                <div className="value expense">₹ 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 */}
      <div className="quick-stats">
        <div className="stat-card">
          <div className="stat-header">
            <div className="label">Total Customers</div>
            <div className="icon-wrapper purple">
              <Users />
            </div>
          </div>
          <div className="stat-value">248</div>
          <div className="stat-change positive">
            <TrendingUp />
            +12% from last month
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-header">
            <div className="label">Active Transactions</div>
            <div className="icon-wrapper blue">
              <Receipt />
            </div>
          </div>
          <div className="stat-value">89</div>
          <div className="stat-change info">23 pending approval</div>
        </div>

        <div className="stat-card">
          <div className="stat-header">
            <div className="label">Net Balance</div>
            <div className="icon-wrapper green">
              <TrendingUp />
            </div>
          </div>
          <div className="stat-value">₹ 97,000</div>
          <div className="stat-change positive">
            <CheckCircle />
            Positive cashflow
          </div>
        </div>
      </div>
    </div>
  );
}
