'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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ArrowLeft, DollarSign, Save, CreditCard } from 'lucide-react';
import { toast } from 'sonner';

interface Alumno {
  id: string;
  categoria: string;
  usuario: {
    nombres: string;
    apellidos: string;
    rut: string;
  };
}

const CONCEPTOS = [
  'Mensualidad',
  'Matrícula',
  'Equipamiento',
  'Torneo',
  'Cuota Extraordinaria',
  'Multa',
  'Otro'
];

const METODOS_PAGO = [
  { value: 'EFECTIVO', label: 'Efectivo' },
  { value: 'TRANSFERENCIA', label: 'Transferencia Bancaria' },
  { value: 'TARJETA', label: 'Tarjeta de Débito/Crédito' },
  { value: 'CHEQUE', label: 'Cheque' }
];

export default function NuevoPagoPage() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();
  const [alumnos, setAlumnos] = useState<Alumno[]>([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  
  const [formData, setFormData] = useState({
    alumnoId: '',
    monto: '',
    concepto: '',
    conceptoOtro: '',
    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') {
      if (!['COORDINADOR', 'PROFESOR'].includes(userRol)) {
        toast.error('No tienes permisos para registrar pagos');
        router.push('/dashboard');
      } else {
        fetchAlumnos();
      }
    }
  }, [status, userRol, router]);

  const fetchAlumnos = async () => {
    try {
      const res = await fetch('/api/alumnos');
      if (res.ok) {
        const data = await res.json();
        setAlumnos(data.alumnos || []);
      }
    } catch (error) {
      console.error('Error fetching alumnos:', error);
      toast.error('Error al cargar alumnos');
    } finally {
      setLoading(false);
    }
  };

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

    if (!formData.alumnoId || !formData.monto || !formData.concepto || !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 concepto = formData.concepto === 'Otro' ? formData.conceptoOtro : formData.concepto;
      
      const res = await fetch('/api/pagos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          alumnoId: formData.alumnoId,
          monto,
          concepto,
          metodoPago: formData.metodoPago,
          fecha: formData.fecha
        })
      });

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

  const alumnoSeleccionado = alumnos.find(a => a.id === formData.alumnoId);

  if (status === 'loading' || 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">
              <CreditCard className="w-6 h-6 text-green-600" />
              Registrar Nuevo Pago
            </CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Selección de Alumno */}
              <div className="space-y-2">
                <Label htmlFor="alumno">Alumno *</Label>
                <Select 
                  value={formData.alumnoId} 
                  onValueChange={(value) => setFormData({ ...formData, alumnoId: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona un alumno" />
                  </SelectTrigger>
                  <SelectContent>
                    {alumnos.map((alumno) => (
                      <SelectItem key={alumno.id} value={alumno.id}>
                        {alumno.usuario.nombres} {alumno.usuario.apellidos} ({alumno.categoria})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {alumnoSeleccionado && (
                  <p className="text-sm text-gray-500">
                    RUT: {alumnoSeleccionado.usuario.rut} | Categoría: {alumnoSeleccionado.categoria}
                  </p>
                )}
              </div>

              {/* Fecha */}
              <div className="space-y-2">
                <Label htmlFor="fecha">Fecha del Pago *</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">Concepto *</Label>
                <Select 
                  value={formData.concepto} 
                  onValueChange={(value) => setFormData({ ...formData, concepto: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona el concepto" />
                  </SelectTrigger>
                  <SelectContent>
                    {CONCEPTOS.map((concepto) => (
                      <SelectItem key={concepto} value={concepto}>
                        {concepto}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {formData.concepto === 'Otro' && (
                  <Input
                    placeholder="Especifica el concepto"
                    value={formData.conceptoOtro}
                    onChange={(e) => setFormData({ ...formData, conceptoOtro: e.target.value })}
                    className="mt-2"
                    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 text-green-600 font-medium">
                    {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 de pago" />
                  </SelectTrigger>
                  <SelectContent>
                    {METODOS_PAGO.map((metodo) => (
                      <SelectItem key={metodo.value} value={metodo.value}>
                        {metodo.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Resumen */}
              {formData.alumnoId && formData.monto && formData.concepto && (
                <Card className="bg-green-50 border-green-200">
                  <CardContent className="pt-4">
                    <h4 className="font-medium text-green-800 mb-2">Resumen del Pago</h4>
                    <div className="space-y-1 text-sm text-green-700">
                      <p><strong>Alumno:</strong> {alumnoSeleccionado?.usuario.nombres} {alumnoSeleccionado?.usuario.apellidos}</p>
                      <p><strong>Concepto:</strong> {formData.concepto === 'Otro' ? formData.conceptoOtro : formData.concepto}</p>
                      <p><strong>Monto:</strong> {new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(parseFloat(formData.monto) || 0)}</p>
                      <p><strong>Método:</strong> {METODOS_PAGO.find(m => m.value === formData.metodoPago)?.label || '-'}</p>
                    </div>
                  </CardContent>
                </Card>
              )}

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