import React, { useState } from 'react';
import { Receipt, DollarSign, TrendingUp, TrendingDown, Clock } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { useToast } from '@/hooks/use-toast';
import { useLanguage } from '@/contexts/LanguageContext';
import { useCurrency } from '@/contexts/CurrencyContext';

const Cashier = () => {
  const { t } = useLanguage();
  const { formatAmount } = useCurrency();
  const { toast } = useToast();
  const [cashierData] = useState({
    openingBalance: 1000.00,
    currentBalance: 2450.50,
    totalSales: 1450.50,
    totalExpenses: 0,
    transactionsCount: 25,
    lastTransaction: new Date().toLocaleTimeString()
  });

  const [newTransaction, setNewTransaction] = useState({
    type: 'sale',
    amount: 0,
    description: ''
  });

  const handleOpenCashier = () => {
    toast({ title: t('openCashier'), description: t('openCashier') });
  };

  const handleCloseCashier = () => {
    toast({ title: t('closeCashier'), description: t('closeCashier') });
  };

  const handleAddTransaction = () => {
    if (newTransaction.amount <= 0) {
      toast({ title: t('error'), description: t('amount'), variant: 'destructive' });
      return;
    }
    toast({ title: t('success'), description: t('registerTransaction') });
    setNewTransaction({ type: 'sale', amount: 0, description: '' });
  };

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <Receipt className="w-8 h-8 text-orange-600" />
            <div>
              <h1 className="text-3xl font-bold text-gray-900">{t('cashierControl')}</h1>
              <p className="text-gray-600">{t('cashierControl')}</p>
            </div>
          </div>
          <div className="flex gap-2">
            <Button onClick={handleOpenCashier}>{t('openCashier')}</Button>
            <Button variant="outline" onClick={handleCloseCashier}>{t('closeCashier')}</Button>
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-4 mb-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{t('openingBalance')}</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{formatAmount(cashierData.openingBalance)}</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{t('currentBalance')}</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">{formatAmount(cashierData.currentBalance)}</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{t('dailySales')}</CardTitle>
              <TrendingUp className="h-4 w-4 text-green-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{formatAmount(cashierData.totalSales)}</div>
              <p className="text-xs text-muted-foreground">{cashierData.transactionsCount} transacciones</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{t('expenses')}</CardTitle>
              <TrendingDown className="h-4 w-4 text-red-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-red-600">{formatAmount(cashierData.totalExpenses)}</div>
            </CardContent>
          </Card>
        </div>

        <div className="grid gap-6 lg:grid-cols-2">
          {/* Quick Transaction */}
          <Card>
            <CardHeader>
              <CardTitle>Registrar Transacción</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <Label>Tipo de Transacción</Label>
                  <div className="grid grid-cols-2 gap-2 mt-2">
                    <Button
                      variant={newTransaction.type === 'sale' ? 'default' : 'outline'}
                      onClick={() => setNewTransaction({ ...newTransaction, type: 'sale' })}
                    >
                      Venta
                    </Button>
                    <Button
                      variant={newTransaction.type === 'expense' ? 'default' : 'outline'}
                      onClick={() => setNewTransaction({ ...newTransaction, type: 'expense' })}
                    >
                      Gasto
                    </Button>
                  </div>
                </div>
                <div>
                  <Label>Monto</Label>
                  <Input
                    type="number"
                    value={newTransaction.amount}
                    onChange={(e) => setNewTransaction({ ...newTransaction, amount: parseFloat(e.target.value) })}
                    placeholder="0.00"
                  />
                </div>
                <div>
                  <Label>Descripción</Label>
                  <Input
                    value={newTransaction.description}
                    onChange={(e) => setNewTransaction({ ...newTransaction, description: e.target.value })}
                    placeholder="Detalle de la transacción"
                  />
                </div>
                <Button className="w-full" onClick={handleAddTransaction}>
                  Registrar
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Recent Transactions */}
          <Card>
            <CardHeader>
              <CardTitle>Transacciones Recientes</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="text-center py-8 text-muted-foreground">
                  No hay transacciones registradas hoy
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default Cashier;