import { useEffect, useState, useCallback } from 'react';
import { ArrowLeftRight } from 'lucide-react';

import api, { type Transaction } from '../api';
import TransactionList from '../components/TransactionList';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

type SourceTab = 'CASH' | 'TRANSFER';

export default function Transfers() {
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [search, setSearch] = useState('');
  const [sourceTab, setSourceTab] = useState<SourceTab>('CASH');
  const [loading, setLoading] = useState(true);

  const fetchTransactions = useCallback(async () => {
    setLoading(true);
    try {
      const params: Record<string, string> = { source: sourceTab, limit: '200' };
      if (search) params.search = search;
      const { data } = await api.get('/transactions/', { params });
      setTransactions(data);
    } finally {
      setLoading(false);
    }
  }, [search, sourceTab]);

  useEffect(() => {
    const timer = setTimeout(fetchTransactions, 300);
    return () => clearTimeout(timer);
  }, [fetchTransactions]);

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-2xl font-bold font-heading">Cash & Transfers</h1>
        <p className="text-sm text-muted-foreground mt-1">
          Track non-credit-card expenses
        </p>
      </div>

      <Tabs value={sourceTab} onValueChange={(v) => setSourceTab(v as SourceTab)}>
        <TabsList>
          <TabsTrigger value="CASH">Cash</TabsTrigger>
          <TabsTrigger value="TRANSFER">Transfers</TabsTrigger>
        </TabsList>

        <TabsContent value={sourceTab} className="mt-5 space-y-5">
          <TransactionList
            transactions={transactions}
            loading={loading}
            source={sourceTab}
            search={search}
            onSearchChange={setSearch}
            onRefresh={fetchTransactions}
            showCategory={false}
            addLabel={sourceTab === 'CASH' ? 'Add Cash Expense' : 'Add Transfer'}
            emptyIcon={<ArrowLeftRight className="w-8 h-8 mx-auto mb-3 text-muted-foreground/50" />}
            emptyMessage={`No ${sourceTab.toLowerCase()} transactions yet`}
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}