import React, { useState, useMemo } from 'react';
import { Wallet, Users, Info, PieChart, Tag, Calendar, User, FileText, TrendingUp, BarChart3, Download } from 'lucide-react';
import { useTourStore } from '@/store/useTourStore';
import { format, parseISO } from 'date-fns';
import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';

export const ExpenseManager = () => {
  const { legs, currentTour } = useTourStore();

  const adults = currentTour?.adultCount ?? 1;
  const children = currentTour?.childCount ?? 0;
  const discount = currentTour?.childDiscount ?? 0;

  const stats = useMemo(() => {
    const categoryMap: Record<string, number> = {
      ACCOMMODATION: 0,
      FOOD: 0,
      TRANSPORT: 0,
      TICKET: 0,
      OTHER: 0
    };
    const legMap: Record<string, number> = {};
    const memberMap: Record<string, number> = {};
    let totalAmount = 0;
    let totalCount = 0;

    (legs || []).forEach(leg => {
      let legTotal = 0;
      (leg.expenses || []).forEach((exp: any) => {
        const amt = Number(exp.amount);
        totalAmount += amt;
        legTotal += amt;
        totalCount += 1;
        
        const memberName = exp.paidBy?.name || 'Chưa rõ';
        memberMap[memberName] = (memberMap[memberName] || 0) + amt;

        if (categoryMap[exp.category] !== undefined) {
          categoryMap[exp.category] += amt;
        } else {
          categoryMap.OTHER += amt;
        }
      });
      legMap[leg.sequence] = legTotal;
    });

    // Tìm hạng mục tốn nhất
    const maxCat = Object.entries(categoryMap).reduce((a, b) => b[1] > a[1] ? b : a);
    
    // Tìm chặng tốn nhất
    const maxLegEntry = Object.entries(legMap).length > 0 
      ? Object.entries(legMap).reduce((a, b) => b[1] > a[1] ? b : a)
      : [null, 0];

    const avgPerLeg = legs.length > 0 ? totalAmount / legs.length : 0;

    // Danh sách phẳng tất cả chi phí để hiển thị bảng
    const flatExpenses: any[] = [];
    [...(legs || [])].sort((a, b) => a.sequence - b.sequence).forEach((leg, legIdx) => {
      const legExpenses = (leg.expenses || []).map((exp: any) => ({
        ...exp,
        legSequence: leg.sequence,
        legDisplayIndex: legIdx + 1, // Số thứ tự chặng liên tục (1, 2, 3...)
        date: exp.location?.plannedStart || leg.startDate || null
      })).sort((a: any, b: any) => {
        if (!a.date || !b.date) return 0;
        return new Date(a.date).getTime() - new Date(b.date).getTime();
      });

      legExpenses.forEach((exp: any, idx: number) => {
        flatExpenses.push({
          ...exp,
          isFirstInLeg: idx === 0
        });
      });
    });

    const childRateFactor = 1 - (Number(discount) / 100);
    const weightedCount = adults + (children * childRateFactor);
    const adultPrice = totalAmount / weightedCount;
    const childPrice = adultPrice * childRateFactor;

    return {
      total: totalAmount,
      count: totalCount,
      adultPrice: Math.round(adultPrice),
      childPrice: Math.round(childPrice),
      categories: categoryMap,
      list: flatExpenses,
      topCategory: maxCat[0],
      topLeg: maxLegEntry[0],
      avgPerLeg,
      memberStats: Object.entries(memberMap)
    };
  }, [legs, adults, children, discount]);

  // Hàm xuất PDF
  const handleExportPDF = () => {
    const doc = new jsPDF();

    // 1. Khai báo chuỗi Base64 của font (Đây là ví dụ, bạn thay bằng chuỗi thực tế từ Bước 1)
    const robotoBase64 = "[encoded data, 143688 characters]";
    
    // Khai báo chuỗi Base64 của Logo (Thay bằng chuỗi thực tế của bạn)
    const logoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAy..."; 

    // 2. Thêm font vào Virtual File System của jsPDF
    doc.addFileToVFS("Roboto-Regular.ttf", robotoBase64);
    
    // 3. Đăng ký font với tên gọi 'Roboto'
    doc.addFont("Roboto-Regular.ttf", "Roboto", "normal");
    
    // 4. Thiết lập font mặc định cho tài liệu
    doc.setFont("Roboto");

    // 5. Thêm Logo vào PDF (x, y, width, height)
    doc.addImage(logoBase64, 'PNG', 14, 10, 15, 15);
    
    // Bây giờ bạn có thể viết tiếng Việt có dấu thoải mái
    doc.setFontSize(18);
    doc.setTextColor(37, 99, 235); // Blue-600
    doc.text("BÁO CÁO CHI PHÍ TOUR", 35, 21); // Đẩy tiêu đề sang phải logo
    
    doc.setFontSize(11);
    doc.setTextColor(100);
    doc.text(`Chuyến đi: ${currentTour?.title || 'Hành trình'}`, 14, 40);
    doc.text(`Ngày xuất: ${format(new Date(), 'dd/MM/yyyy HH:mm')}`, 14, 47);
    
    doc.setTextColor(0);
    doc.setFontSize(12);
    doc.text(`Tổng chi: ${stats.total.toLocaleString()} VNĐ`, 14, 57);
    doc.text(`Định mức: Người lớn: ${stats.adultPrice.toLocaleString()}đ | Trẻ em: ${stats.childPrice.toLocaleString()}đ`, 14, 64);

    // Cấu hình bảng dữ liệu
    const tableColumn = ["STT", "Ngày giờ", "Chặng", "Dịch vụ", "Số tiền (VNĐ)", "Người chi"];
    const tableRows = stats.list.map((exp: any) => [
      exp.isFirstInLeg ? exp.legSequence : '',
      exp.date ? format(new Date(exp.date), 'd/M - p') : '--/--',
      exp.isFirstInLeg ? `Chặng ${exp.legSequence}` : '',
      exp.description || 'Không có mô tả',
      Number(exp.amount).toLocaleString(),
      exp.paidBy?.name || 'Chưa rõ'
    ]);

    autoTable(doc, {
      head: [tableColumn],
      body: tableRows,
      startY: 75, // Đẩy bảng xuống để không đè lên thông tin phía trên
      theme: 'grid',
      headStyles: { fillColor: [37, 99, 235], textColor: [255, 255, 255], fontStyle: 'normal' }, // Roboto Bold nếu bạn thêm font bold
      styles: { font: "Roboto", fontSize: 8, cellPadding: 3 }, // Quan trọng: Khai báo font ở đây cho autoTable
      columnStyles: {
        4: { halign: 'right' }
      }
    });

    doc.save(`Chi-phi-tour-${currentTour?.title || 'export'}.pdf`);
  };

  const categoryLabels: Record<string, { label: string, color: string }> = {
    ACCOMMODATION: { label: 'Chỗ ở', color: 'bg-blue-500' },
    FOOD: { label: 'Ăn uống', color: 'bg-orange-500' },
    TRANSPORT: { label: 'Di chuyển', color: 'bg-indigo-500' },
    TICKET: { label: 'Vé tham quan', color: 'bg-green-500' },
    OTHER: { label: 'Khác', color: 'bg-gray-400' }
  };

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
      <div className="bg-blue-600 rounded-2xl p-6 text-white shadow-lg shadow-blue-200">
        <div className="flex justify-between items-start mb-8">
          <div>
            <p className="text-blue-100 text-sm">Tổng chi phí chuyến đi</p>
            <h2 className="text-3xl font-bold mt-1">{stats.total.toLocaleString()} VND</h2>
            <p className="text-blue-200 text-[10px] mt-1 font-bold uppercase tracking-wider">{stats.count} hóa đơn đã ghi nhận</p>
          </div>
          <Wallet className="w-8 h-8 opacity-20" />
        </div>
        <div className="grid grid-cols-2 gap-4 border-t border-blue-500 pt-6">
          <div>
            <p className="text-blue-100 text-xs uppercase tracking-wider font-semibold">Mỗi người lớn</p>
            <p className="text-xl font-bold">{stats.adultPrice.toLocaleString()}đ</p>
          </div>
          <div>
            <p className="text-blue-100 text-xs uppercase tracking-wider font-semibold">Mỗi trẻ em (-{discount}%)</p>
            <p className="text-xl font-bold">{stats.childPrice.toLocaleString()}đ</p>
          </div>
        </div>
      </div>

      {/* Các thẻ chỉ số nhanh */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-500">
            <BarChart3 className="w-5 h-5" />
          </div>
          <div>
            <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Hạng mục cao nhất</p>
            <p className="text-sm font-bold text-gray-800">{categoryLabels[stats.topCategory]?.label || 'Chưa có'}</p>
          </div>
        </div>
        <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center text-purple-500">
            <TrendingUp className="w-5 h-5" />
          </div>
          <div>
            <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Trung bình / Chặng</p>
            <p className="text-sm font-bold text-gray-800">{Math.round(stats.avgPerLeg).toLocaleString()}đ</p>
          </div>
        </div>
        <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-green-50 flex items-center justify-center text-green-500">
            <Tag className="w-5 h-5" />
          </div>
          <div>
            <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Chặng tốn kém nhất</p>
            <p className="text-sm font-bold text-gray-800">{stats.topLeg ? `Chặng ${stats.topLeg}` : 'Chưa có'}</p>
          </div>
        </div>
      </div>

      {/* Thống kê theo thành viên */}
      <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
        <div className="flex items-center gap-2 mb-6 text-gray-800">
          <Users className="w-5 h-5 text-blue-500" />
          <h3 className="font-bold">Thống kê theo người chi trả</h3>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {stats.memberStats.length > 0 ? stats.memberStats.map(([name, amount]) => {
            const percentage = stats.total > 0 ? (amount / stats.total) * 100 : 0;
            return (
              <div key={name} className="flex items-center justify-between p-4 bg-gray-50 rounded-2xl border border-gray-100">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xs">
                    {name.charAt(0)}
                  </div>
                  <span className="text-sm font-bold text-gray-700">{name}</span>
                </div>
                <div className="text-right">
                  <div className="text-sm font-black text-gray-900">{amount.toLocaleString()}đ</div>
                  <div className="text-[10px] text-gray-400 font-bold uppercase">{percentage.toFixed(1)}% tổng chi</div>
                </div>
              </div>
            );
          }) : (
            <div className="col-span-full py-8 text-center text-gray-400 text-sm italic">
              Chưa có thông tin chi trả của thành viên.
            </div>
          )}
        </div>
      </div>

      {/* Thống kê theo hạng mục */}
      <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
        <div className="flex items-center gap-2 mb-6 text-gray-800">
          <PieChart className="w-5 h-5 text-indigo-500" />
          <h3 className="font-bold">Phân tích chi tiêu</h3>
        </div>
        <div className="space-y-4">
          {stats.total > 0 ? Object.entries(stats.categories).map(([key, value]) => {
            const percentage = stats.total > 0 ? (value / stats.total) * 100 : 0;
            if (value === 0) return null;
            return (
              <div key={key}>
                <div className="flex justify-between text-xs mb-1.5 font-bold">
                  <span className="text-gray-600 flex items-center gap-1.5">
                    <div className={`w-2 h-2 rounded-full ${categoryLabels[key].color}`} />
                    {categoryLabels[key].label}
                  </span>
                  <span className="text-gray-900">{value.toLocaleString()}đ ({percentage.toFixed(1)}%)</span>
                </div>
                <div className="w-full h-2 bg-gray-50 rounded-full overflow-hidden border border-gray-100">
                  <div className={`h-full ${categoryLabels[key].color} transition-all duration-500`} style={{ width: `${percentage}%` }} />
                </div>
              </div>
            );
          }) : (
            <div className="py-8 text-center text-gray-400 text-sm italic">
              Chưa có dữ liệu phân tích theo hạng mục.
            </div>
          )}
        </div>
      </div>
      
      {/* Bảng thống kê chi tiết chi phí */}
      <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
        <div className="p-6 border-b border-gray-100 bg-gray-50/30 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <FileText className="w-5 h-5 text-blue-600" />
            <h3 className="font-black text-gray-900 uppercase tracking-tight">Bảng kê chi tiết các khoản chi</h3>
          </div>
          <button 
            onClick={handleExportPDF}
            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-[11px] font-black uppercase tracking-wider transition-all shadow-lg shadow-blue-200 active:scale-95"
          >
            <Download className="w-3.5 h-3.5" /> Xuất PDF
          </button>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="bg-gray-50/50 text-[10px] font-black text-gray-400 uppercase tracking-widest border-b border-gray-100">
                <th className="px-4 py-4 text-center">STT</th>
                <th className="px-4 py-4 min-w-[100px]">Ngày giờ</th>
                <th className="px-4 py-4 min-w-[80px]">Chặng</th>
                <th className="px-4 py-4">Dịch vụ sử dụng</th>
                <th className="px-4 py-4 text-right">Số tiền</th>
                <th className="px-4 py-4 min-w-[120px]">Người đã trả</th>
                <th className="px-4 py-4">Ghi chú</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {stats.list.length > 0 ? (
                stats.list.map((exp: any) => (
                  <tr key={exp.id} className={`hover:bg-blue-50/20 transition-colors text-sm ${!exp.isFirstInLeg ? 'bg-gray-50/10' : ''}`}>
                    <td className="px-4 py-4 text-center font-black text-gray-400">
                      {exp.isFirstInLeg ? exp.legDisplayIndex : ''}
                    </td>
                    <td className="px-4 py-4">
                      <div className="flex items-center gap-1.5 text-gray-600 font-medium">
                        <Calendar className="w-3.5 h-3.5 opacity-40" />
                        {exp.date ? format(new Date(exp.date), 'd/M - p') : '--/--'}
                      </div>
                    </td>
                    <td className="px-4 py-4 whitespace-nowrap">
                      {exp.isFirstInLeg ? (
                        <span className="px-2 py-1 bg-blue-50 text-blue-600 rounded-lg font-bold text-[10px]">
                          Chặng {exp.legSequence}
                        </span>
                      ) : (
                        <div className="ml-6 border-l-2 border-blue-100/50 h-4" />
                      )}
                    </td>
                    <td className="px-4 py-4 font-semibold text-gray-800">
                      {exp.location?.name ? (
                        <div className="flex flex-col">
                          <span className="text-gray-900">{exp.description || 'Chi phí dịch vụ'}</span>
                          <span className="text-[10px] text-blue-500 font-bold uppercase tracking-tighter">@{exp.location.name}</span>
                        </div>
                      ) : (
                        exp.description || 'Không có mô tả'
                      )}
                    </td>
                    <td className="px-4 py-4 text-right font-black text-blue-600">
                      {Number(exp.amount).toLocaleString()}đ
                    </td>
                    <td className="px-4 py-4">
                      <div className="flex items-center gap-1.5 text-gray-600">
                        <User className="w-3.5 h-3.5 opacity-40" />
                        {exp.paidBy?.name || 'Chưa rõ'}
                      </div>
                    </td>
                    <td className="px-4 py-4 text-xs text-gray-400 italic">
                      {exp.note || '-'}
                    </td>
                  </tr>
                ))
              ) : (
                [1, 2, 3].map((i) => (
                  <tr key={`sample-${i}`} className="opacity-30 grayscale pointer-events-none select-none text-sm">
                    <td className="px-4 py-4 text-center font-bold text-gray-300">{i}</td>
                    <td className="px-4 py-4 text-gray-300">--/-- --:--</td>
                    <td className="px-4 py-4 text-gray-300">Chặng -</td>
                    <td className="px-4 py-4 text-gray-300 italic">Chưa có dữ liệu...</td>
                    <td className="px-4 py-4 text-right text-gray-300">0đ</td>
                    <td className="px-4 py-4 text-gray-300">Chưa rõ</td>
                    <td className="px-4 py-4 text-gray-200">-</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      <div className="flex items-center gap-2 text-gray-400 text-xs px-2">
        <Info className="w-4 h-4" />
        <p>Chi phí được tự động tính toán dựa trên hóa đơn của các chặng.</p>
      </div>
    </div>
  );
};