'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ArrowLeft, DollarSign, Save, TrendingUp, TrendingDown, Receipt } from 'lucide-react';
import { toast } from 'sonner';

const CATEGORIAS_INGRESO = [
  'Mensualidades',
  'Matrículas',
  'Torneos',
  'Patrocinios',
  'Donaciones',
  'Venta de Equipamiento',
  'Eventos Especiales',
  'Otros Ingresos'
];

const CATEGORIAS_EGRESO = [
  'Arriendo de Cancha',
  'Equipamiento',
  'Uniformes',
  'Material Deportivo',
  'Transporte',
  'Alimentación',
  'Sueldos',
  'Servicios Básicos',
  'Mantenimiento',
  'Seguros',
  'Inscripción Torneos',
  'Otros Egresos'
];

const METODOS_PAGO = [
  { value: 'EFECTIVO', label: 'Efectivo' },
  { value: 'TRANSFERENCIA', label: 'Transferencia Bancaria' },
  { value: 'TARJETA', label: 'Tarjeta' },
  { value: 'CHEQUE', label: 'Cheque' }
];

export default function NuevoMovimientoPage() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();
  const [submitting, setSubmitting] = useState(false);
  
  const [formData, setFormData] = useState({
    tipo: '',
    categoria: '',
    concepto: '',
    monto: '',
    metodoPago: '',
    fecha: new Date().toISOString().split('T')[0]
  });

  const userRol = (session?.user as any)?.rol;

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    } else if (status === 'authenticated' && userRol !== 'COORDINADOR') {
      toast.error('Solo el coordinador puede registrar movimientos financieros');
      router.push('/dashboard');
    }
  }, [status, userRol, router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.tipo || !formData.categoria || !formData.concepto || !formData.monto || !formData.metodoPago) {
      toast.error('Por favor completa todos los campos requeridos');
      return;
    }

    const monto = parseFloat(formData.monto);
    if (isNaN(monto) || monto <= 0) {
      toast.error('El monto debe ser un número positivo');
      return;
    }

    setSubmitting(true);

    try {
      const res = await fetch('/api/finanzas', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tipo: formData.tipo,
          categoria: formData.categoria,
          concepto: formData.concepto,
          monto,
          metodoPago: formData.metodoPago,
          fecha: formData.fecha
        })
      });

      if (res.ok) {
        toast.success('Movimiento registrado exitosamente');
        router.push('/dashboard/finanzas');
      } else {
        const data = await res.json();
        toast.error(data.error || 'Error al registrar movimiento');
      }
    } catch (error) {
      console.error('Error:', error);
      toast.error('Error al registrar movimiento');
    } finally {
      setSubmitting(false);
    }
  };

  const categorias = formData.tipo === 'INGRESO' ? CATEGORIAS_INGRESO : CATEGORIAS_EGRESO;

  if (status === 'loading') {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-2xl mx-auto">
        {/* Header */}
        <div className="flex items-center gap-4 mb-6">
          <Button variant="ghost" onClick={() => router.push('/dashboard/finanzas')}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            Volver a Finanzas
          </Button>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Receipt className="w-6 h-6 text-purple-600" />
              Registrar Movimiento Financiero
            </CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Tipo de Movimiento */}
              <div className="space-y-2">
                <Label>Tipo de Movimiento *</Label>
                <div className="grid grid-cols-2 gap-4">
                  <button
                    type="button"
                    onClick={() => setFormData({ ...formData, tipo: 'INGRESO', categoria: '' })}
                    className={`p-4 rounded-lg border-2 flex flex-col items-center gap-2 transition-colors ${
                      formData.tipo === 'INGRESO'
                        ? 'border-green-500 bg-green-50'
                        : 'border-gray-200 hover:border-green-300'
                    }`}
                  >
                    <TrendingUp className={`w-8 h-8 ${formData.tipo === 'INGRESO' ? 'text-green-600' : 'text-gray-400'}`} />
                    <span className={`font-medium ${formData.tipo === 'INGRESO' ? 'text-green-700' : 'text-gray-600'}`}>
                      Ingreso
                    </span>
                  </button>
                  <button
                    type="button"
                    onClick={() => setFormData({ ...formData, tipo: 'EGRESO', categoria: '' })}
                    className={`p-4 rounded-lg border-2 flex flex-col items-center gap-2 transition-colors ${
                      formData.tipo === 'EGRESO'
                        ? 'border-red-500 bg-red-50'
                        : 'border-gray-200 hover:border-red-300'
                    }`}
                  >
                    <TrendingDown className={`w-8 h-8 ${formData.tipo === 'EGRESO' ? 'text-red-600' : 'text-gray-400'}`} />
                    <span className={`font-medium ${formData.tipo === 'EGRESO' ? 'text-red-700' : 'text-gray-600'}`}>
                      Egreso
                    </span>
                  </button>
                </div>
              </div>

              {/* Categoría */}
              {formData.tipo && (
                <div className="space-y-2">
                  <Label htmlFor="categoria">Categoría *</Label>
                  <Select 
                    value={formData.categoria} 
                    onValueChange={(value) => setFormData({ ...formData, categoria: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona la categoría" />
                    </SelectTrigger>
                    <SelectContent>
                      {categorias.map((cat) => (
                        <SelectItem key={cat} value={cat}>
                          {cat}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {/* Fecha */}
              <div className="space-y-2">
                <Label htmlFor="fecha">Fecha *</Label>
                <Input
                  id="fecha"
                  type="date"
                  value={formData.fecha}
                  onChange={(e) => setFormData({ ...formData, fecha: e.target.value })}
                  required
                />
              </div>

              {/* Concepto */}
              <div className="space-y-2">
                <Label htmlFor="concepto">Descripción / Concepto *</Label>
                <Textarea
                  id="concepto"
                  placeholder="Describe el movimiento..."
                  value={formData.concepto}
                  onChange={(e) => setFormData({ ...formData, concepto: e.target.value })}
                  rows={3}
                  required
                />
              </div>

              {/* Monto */}
              <div className="space-y-2">
                <Label htmlFor="monto">Monto (CLP) *</Label>
                <div className="relative">
                  <DollarSign className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <Input
                    id="monto"
                    type="number"
                    min="0"
                    step="100"
                    placeholder="0"
                    value={formData.monto}
                    onChange={(e) => setFormData({ ...formData, monto: e.target.value })}
                    className="pl-10"
                    required
                  />
                </div>
                {formData.monto && (
                  <p className={`text-sm font-medium ${
                    formData.tipo === 'INGRESO' ? 'text-green-600' : formData.tipo === 'EGRESO' ? 'text-red-600' : 'text-gray-600'
                  }`}>
                    {new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(parseFloat(formData.monto) || 0)}
                  </p>
                )}
              </div>

              {/* Método de Pago */}
              <div className="space-y-2">
                <Label htmlFor="metodoPago">Método de Pago *</Label>
                <Select 
                  value={formData.metodoPago} 
                  onValueChange={(value) => setFormData({ ...formData, metodoPago: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona el método" />
                  </SelectTrigger>
                  <SelectContent>
                    {METODOS_PAGO.map((metodo) => (
                      <SelectItem key={metodo.value} value={metodo.value}>
                        {metodo.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Resumen */}
              {formData.tipo && formData.monto && formData.categoria && (
                <Card className={formData.tipo === 'INGRESO' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}>
                  <CardContent className="pt-4">
                    <h4 className={`font-medium mb-2 ${formData.tipo === 'INGRESO' ? 'text-green-800' : 'text-red-800'}`}>
                      Resumen del Movimiento
                    </h4>
                    <div className={`space-y-1 text-sm ${formData.tipo === 'INGRESO' ? 'text-green-700' : 'text-red-700'}`}>
                      <p><strong>Tipo:</strong> {formData.tipo === 'INGRESO' ? 'Ingreso' : 'Egreso'}</p>
                      <p><strong>Categoría:</strong> {formData.categoria}</p>
                      <p><strong>Monto:</strong> {new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(parseFloat(formData.monto) || 0)}</p>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Botones */}
              <div className="flex gap-4">
                <Button
                  type="submit"
                  disabled={submitting}
                  className={`flex-1 ${formData.tipo === 'INGRESO' ? 'bg-green-600 hover:bg-green-700' : formData.tipo === 'EGRESO' ? 'bg-red-600 hover:bg-red-700' : 'bg-purple-600 hover:bg-purple-700'}`}
                >
                  <Save className="w-4 h-4 mr-2" />
                  {submitting ? 'Registrando...' : 'Registrar Movimiento'}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.push('/dashboard/finanzas')}
                >
                  Cancelar
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}