import { useState } from 'react';
import { Bell, HelpCircle, ChevronDown, Search, Calendar, Filter, Download, TrendingUp, TrendingDown, MoreVertical, Clock, CheckCircle, XCircle, Loader, Home as HomeIcon, ArrowLeftRight } from 'lucide-react';
import BreadCrumb from '../../components/BreadCrumb';

export default function Transactions({ user }) {
  const [searchQuery, setSearchQuery] = useState('');
  const [dateRange] = useState('1 Apr - 31 May 2024');

  const statusCards = [
    {
      label: 'Waiting Payment',
      count: 435,
      change: '+56%',
      positive: true,
      color: 'bg-yellow-50',
      iconBg: 'bg-yellow-100',
      iconColor: 'text-yellow-600',
      icon: Clock,
      borderColor: 'border-yellow-200'
    },
    {
      label: 'On Process',
      count: 234,
      change: '+26%',
      positive: true,
      color: 'bg-blue-50',
      iconBg: 'bg-blue-100',
      iconColor: 'text-blue-600',
      icon: Loader,
      borderColor: 'border-blue-200'
    },
    {
      label: 'On Delivery',
      count: 456,
      change: '+68%',
      positive: true,
      color: 'bg-cyan-50',
      iconBg: 'bg-cyan-100',
      iconColor: 'text-cyan-600',
      icon: CheckCircle,
      borderColor: 'border-cyan-200'
    },
    {
      label: 'Completed',
      count: 675,
      change: '+86%',
      positive: true,
      color: 'bg-green-50',
      iconBg: 'bg-green-100',
      iconColor: 'text-green-600',
      icon: CheckCircle,
      borderColor: 'border-green-200'
    },
    {
      label: 'Cancelled',
      count: 675,
      change: '+23%',
      positive: false,
      color: 'bg-red-50',
      iconBg: 'bg-red-100',
      iconColor: 'text-red-600',
      icon: XCircle,
      borderColor: 'border-red-200'
    },
  ];

  const transactions = [
    {
      id: 1,
      customer: 'Rajesh Kumar',
      avatar: 'RK',
      category: 'Payment',
      type: 'Credit',
      date: '30 May 2024',
      amount: '₹ 45,000',
      status: 'Completed',
      statusColor: 'bg-green-100 text-green-700'
    },
    {
      id: 2,
      customer: 'Priya Sharma',
      avatar: 'PS',
      category: 'Payment',
      type: 'Credit',
      date: '30 May 2024',
      amount: '₹ 44,000',
      status: 'Completed',
      statusColor: 'bg-green-100 text-green-700'
    },
    {
      id: 3,
      customer: 'Amit Patel',
      avatar: 'AP',
      category: 'Expense',
      type: 'Debit',
      date: '31 May 2024',
      amount: '₹ 15,000',
      status: 'On Process',
      statusColor: 'bg-blue-100 text-blue-700'
    },
    {
      id: 4,
      customer: 'Sneha Reddy',
      avatar: 'SR',
      category: 'Payment',
      type: 'Credit',
      date: '28 May 2024',
      amount: '₹ 11,000',
      status: 'Waiting Payment',
      statusColor: 'bg-yellow-100 text-yellow-700'
    },
    {
      id: 5,
      customer: 'Vikram Singh',
      avatar: 'VS',
      category: 'Expense',
      type: 'Debit',
      date: '25 May 2024',
      amount: '₹ 8,000',
      status: 'Cancelled',
      statusColor: 'bg-red-100 text-red-700'
    },
    {
      id: 6,
      customer: 'Anjali Gupta',
      avatar: 'AG',
      category: 'Expense',
      type: 'Debit',
      date: '24 May 2024',
      amount: '₹ 5,000',
      status: 'On Process',
      statusColor: 'bg-blue-100 text-blue-700'
    },
    {
      id: 7,
      customer: 'Karthik Iyer',
      avatar: 'KI',
      category: 'Payment',
      type: 'Credit',
      date: '24 May 2024',
      amount: '₹ 6,000',
      status: 'Completed',
      statusColor: 'bg-green-100 text-green-700'
    },
  ];

  const breadcrumbItems = [
    { icon: <HomeIcon />, label: 'Home', path: '/dashboard', active: false },
    { icon: <ArrowLeftRight />, label: 'Transactions', path: '/transactions', active: true }
  ];

  return (
    <div>
      {/* Header */}
      <div className='relative'>
        <BreadCrumb items={breadcrumbItems} showUser={true} />
      </div>
      {/* Status Cards */}
      <div>
        <h2 className="text-xl font-bold text-gray-900 mb-5">Transaction Status</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>

      {/* Transactions 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 mb-2">
            <div>
              <h2 className="text-xl font-bold text-gray-900 mb-1">All Transactions</h2>
              <p className="text-sm text-gray-500">View detailed records of user transactions</p>
            </div>
            <div className="flex items-center gap-6">
              <div className="text-right">
                <div className="text-xs text-gray-500 font-medium">Pending payments</div>
                <div className="text-lg font-bold text-red-600">₹ 34,000</div>
              </div>
              <div className="text-right">
                <div className="text-xs text-gray-500 font-medium">Received payments</div>
                <div className="text-lg font-bold text-green-600">₹ 5,50,870</div>
              </div>
            </div>
          </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, brand, category etc"
                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">
              <Calendar className="w-4 h-4 text-gray-600" />
              <span>{dateRange}</span>
            </button>
            <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>
            <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">
              <Download className="w-4 h-4" />
              Export CSV
            </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">
                  Category
                </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">
                  Time Order
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  Amount
                </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">
              {transactions.map((transaction) => (
                <tr key={transaction.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">
                        {transaction.avatar}
                      </div>
                      <span className="text-sm font-medium text-gray-900">{transaction.customer}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-medium">
                    {transaction.category}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">
                    {transaction.type}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                    {transaction.date}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">
                    {transaction.amount}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${transaction.statusColor}`}>
                      {transaction.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>
  );
}

