import { useState } from 'react';
import { useExpenseStore } from '@/stores/expenseStore';
import { useUIStore } from '@/stores/uiStore';
import { format } from 'date-fns';
import { IndianRupee, Save, ChevronLeft, Receipt } from 'lucide-react';

const expenseCategories = [
  { key: 'rent', label: 'Rent', color: 'bg-red-100 text-red-600' },
  { key: 'salary', label: 'Salary', color: 'bg-blue-100 text-blue-600' },
  { key: 'electricity', label: 'Electricity', color: 'bg-amber-100 text-amber-600' },
  { key: 'water', label: 'Water', color: 'bg-cyan-100 text-cyan-600' },
  { key: 'maintenance', label: 'Maintenance', color: 'bg-orange-100 text-orange-600' },
  { key: 'transport', label: 'Transport', color: 'bg-purple-100 text-purple-600' },
  { key: 'food', label: 'Food', color: 'bg-pink-100 text-pink-600' },
  { key: 'other', label: 'Other', color: 'bg-gray-100 text-gray-600' },
];

export default function AddExpenseScreen() {
  const { addExpense } = useExpenseStore();
  const { goBack, showToast } = useUIStore();

  const [form, setForm] = useState({
    category: 'rent' as const,
    description: '',
    amount: '',
    expenseDate: format(new Date(), 'yyyy-MM-dd'),
  });

  const handleSubmit = async () => {
    if (!form.description.trim() || !form.amount || Number(form.amount) <= 0) {
      showToast({ type: 'error', message: 'Please fill all fields' });
      return;
    }
    await addExpense({
      category: form.category,
      description: form.description.trim(),
      amount: Number(form.amount),
      expenseDate: form.expenseDate,
    });
    showToast({ type: 'success', message: 'Expense added!' });
    goBack();
  };

  return (
    <div className="px-4 pt-4 pb-4">
      {/* Header */}
      <div className="flex items-center gap-2 mb-4">
        <button onClick={goBack} className="p-1"><ChevronLeft className="w-5 h-5 text-gray-500" /></button>
        <h2 className="text-lg font-bold text-gray-900">Add Expense</h2>
      </div>

      <div className="space-y-4">
        {/* Category Grid */}
        <div>
          <label className="block text-xs font-semibold text-gray-500 mb-2 uppercase">Category</label>
          <div className="grid grid-cols-4 gap-2">
            {expenseCategories.map(cat => (
              <button
                key={cat.key}
                onClick={() => setForm(p => ({ ...p, category: cat.key as typeof form.category }))}
                className={`py-2.5 rounded-xl text-[10px] font-bold text-center transition-all ${
                  form.category === cat.key
                    ? 'bg-orange-500 text-white shadow-md scale-105'
                    : 'bg-gray-50 text-gray-600 hover:bg-gray-100'
                }`}
              >
                {cat.label}
              </button>
            ))}
          </div>
        </div>

        {/* Description */}
        <div>
          <label className="block text-xs font-semibold text-gray-500 mb-1.5 uppercase">Description</label>
          <input
            type="text"
            value={form.description}
            onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
            placeholder="e.g., Academy Hall Rent"
            className="w-full h-12 px-4 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-orange-500"
          />
        </div>

        {/* Amount */}
        <div>
          <label className="block text-xs font-semibold text-gray-500 mb-1.5 uppercase">Amount</label>
          <div className="relative">
            <IndianRupee className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <input
              type="number"
              value={form.amount}
              onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}
              placeholder="0"
              className="w-full h-12 pl-9 pr-4 bg-white border border-gray-200 rounded-xl text-sm font-mono focus:outline-none focus:border-orange-500"
            />
          </div>
        </div>

        {/* Date */}
        <div>
          <label className="block text-xs font-semibold text-gray-500 mb-1.5 uppercase">Date</label>
          <input
            type="date"
            value={form.expenseDate}
            onChange={e => setForm(p => ({ ...p, expenseDate: e.target.value }))}
            className="w-full h-12 px-4 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-orange-500"
          />
        </div>

        {/* Save */}
        <button
          onClick={handleSubmit}
          className="w-full h-14 bg-red-500 text-white font-bold rounded-2xl shadow-lg flex items-center justify-center gap-2 active:scale-[0.97] transition-transform mt-2"
        >
          <Receipt className="w-5 h-5" /> Save Expense
        </button>
      </div>
    </div>
  );
}
