import React, { useState, useMemo } from 'react';
import { Wallet, Users, Info } from 'lucide-react';
import { useTourStore } from './useTourStore';

export const ExpenseManager = () => {
  const { legs } = useTourStore();
  const [adults, setAdults] = useState(2);
  const [children, setChildren] = useState(1);
  const [discount, setDiscount] = useState(30);

  const totals = useMemo(() => {
    const totalAmount = legs.reduce((acc, leg) => 
      acc + leg.expenses.reduce((lAcc: number, exp: any) => lAcc + Number(exp.amount), 0), 0
    );

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

    return {
      total: totalAmount,
      adultPrice: Math.round(adultPrice),
      childPrice: Math.round(childPrice)
    };
  }, [legs, adults, children, discount]);

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
      <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
        <div className="flex items-center gap-2 mb-6 text-blue-600">
          <Users className="w-5 h-5" />
          <h3 className="font-bold">Cấu hình thành viên</h3>
        </div>
        <div className="grid grid-cols-3 gap-4">
          <div>
            <label className="text-xs text-gray-400 block mb-1">Người lớn</label>
            <input type="number" value={adults} onChange={e => setAdults(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
          </div>
          <div>
            <label className="text-xs text-gray-400 block mb-1">Trẻ em</label>
            <input type="number" value={children} onChange={e => setChildren(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
          </div>
          <div>
            <label className="text-xs text-gray-400 block mb-1">Giảm trẻ em (%)</label>
            <input type="number" value={discount} onChange={e => setDiscount(Number(e.target.value))} className="w-full p-2 bg-gray-50 rounded-lg border-none focus:ring-2 focus:ring-blue-500" />
          </div>
        </div>
      </div>

      <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">{totals.total.toLocaleString()} VND</h2>
          </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">{totals.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">{totals.childPrice.toLocaleString()}đ</p>
          </div>
        </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>
  );
};