import { useState } from 'react';
import { motion } from 'framer-motion';
import { X, AlertTriangle, Send, MessageSquare } from 'lucide-react';
import api from '../services/api';
import { useToast } from '../context/use-toast';

interface ClaimModalProps {
  listingId: number;
  onClose: () => void;
  onSuccess: () => void;
}

const CLAIM_TYPES = [
  "Error en Texto",
  "Error en Cobro / Importe",
  "Datos de Cliente incorrectos",
  "Solicitud de Baja",
  "Queja de Cliente",
  "Otros"
];

export default function ClaimModal({ listingId, onClose, onSuccess }: ClaimModalProps) {
  const { showToast } = useToast();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    claimType: '',
    description: ''
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.claimType || !formData.description) return;

    setLoading(true);
    try {
      await api.post('/claims', {
        listingId,
        claimType: formData.claimType,
        description: formData.description
      });
      showToast("Reclamo registrado correctamente", "success");
      onSuccess();
      onClose();
    } catch (error) {
      showToast("Error al registrar el reclamo", "error");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-[300] flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.95, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        className="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100"
      >
        <div className="p-8 bg-slate-900 text-white flex justify-between items-center">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-blue-600 rounded-2xl shadow-lg shadow-blue-500/20">
              <AlertTriangle size={24} />
            </div>
            <div>
              <span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400">Atención al Cliente</span>
              <h3 className="text-xl font-black uppercase tracking-tight">Nuevo Reclamo</h3>
            </div>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors"><X /></button>
        </div>

        <form onSubmit={handleSubmit} className="p-8 space-y-6">
          <div className="space-y-2">
            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Motivo del reclamo</label>
            <select
              required
              className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-500 font-bold text-slate-700"
              value={formData.claimType}
              onChange={e => setFormData({ ...formData, claimType: e.target.value })}
            >
              <option value="">Seleccione una categoría...</option>
              {CLAIM_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </div>

          <div className="space-y-2">
            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Descripción detallada</label>
            <div className="relative">
              <MessageSquare className="absolute left-4 top-4 text-slate-300" size={20} />
              <textarea
                required
                className="w-full p-4 pl-12 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-500 font-bold text-slate-700 min-h-[150px] resize-none"
                placeholder="Explique lo ocurrido con el máximo detalle posible..."
                value={formData.description}
                onChange={e => setFormData({ ...formData, description: e.target.value })}
              />
            </div>
          </div>

          <div className="pt-4 flex gap-4">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 py-4 bg-slate-50 text-slate-500 font-black uppercase text-xs tracking-widest rounded-2xl hover:bg-slate-100 transition-all"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={loading}
              className="flex-[1.5] py-4 bg-blue-600 text-white font-black uppercase text-xs tracking-widest rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-2"
            >
              <Send size={16} /> {loading ? 'Registrando...' : 'Confirmar Reporte'}
            </button>
          </div>
        </form>
      </motion.div>
    </div>
  );
}