import { useEffect, useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import { api } from '../services/api';

function RatingInput({ value, onChange, min = 1, max = 5 }) {
  return (
    <div className="flex gap-2">
      {Array.from({ length: max - min + 1 }, (_, i) => min + i).map((n) => (
        <button
          key={n}
          type="button"
          onClick={() => onChange(n)}
          className={`w-10 h-10 rounded-lg font-semibold transition-colors ${
            value === n
              ? 'bg-avante-teal text-white'
              : 'bg-slate-100 text-slate-600 hover:bg-avante-teal/20'
          }`}
        >
          {n}
        </button>
      ))}
    </div>
  );
}

function FieldRenderer({ field, value, onChange }) {
  switch (field.type) {
    case 'rating':
      return <RatingInput value={value} onChange={onChange} min={field.min} max={field.max} />;
    case 'select':
      return (
        <select className="input-field" value={value || ''} onChange={(e) => onChange(e.target.value)} required={field.required}>
          <option value="">Seleccione...</option>
          {field.options.map((o) => (
            <option key={o} value={o}>{o}</option>
          ))}
        </select>
      );
    case 'textarea':
      return (
        <textarea
          className="input-field"
          rows={4}
          value={value || ''}
          onChange={(e) => onChange(e.target.value)}
          required={field.required}
        />
      );
    default:
      return (
        <input
          className="input-field"
          type="text"
          value={value || ''}
          onChange={(e) => onChange(e.target.value)}
          required={field.required}
        />
      );
  }
}

export default function EncuestaResponder() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [encuesta, setEncuesta] = useState(null);
  const [datos, setDatos] = useState({});
  const [respondidoPor, setRespondidoPor] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    api
      .getEncuesta(id)
      .then(setEncuesta)
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSaving(true);
    setError('');
    try {
      await api.submitRespuesta(id, { datos, respondido_por: respondidoPor });
      setSuccess(true);
      setTimeout(() => navigate('/encuestas'), 2000);
    } catch (err) {
      setError(err.message);
    } finally {
      setSaving(false);
    }
  };

  if (loading) return <div className="text-slate-500">Cargando encuesta...</div>;
  if (error && !encuesta) return <div className="text-red-600">{error}</div>;

  if (success) {
    return (
      <div className="max-w-lg mx-auto card text-center py-12">
        <div className="text-4xl mb-4">✓</div>
        <h2 className="text-xl font-bold text-slate-800">¡Gracias por su respuesta!</h2>
        <p className="text-slate-500 mt-2">Su evaluación ha sido registrada correctamente.</p>
      </div>
    );
  }

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <Link to="/encuestas" className="text-sm text-avante-teal hover:underline">
          ← Volver a encuestas
        </Link>
        <h2 className="text-2xl font-bold text-slate-800 mt-2">{encuesta.titulo}</h2>
        <p className="text-avante-teal text-sm mt-1">{encuesta.departamentoNombre}</p>
        {encuesta.descripcion && <p className="text-slate-500 mt-2">{encuesta.descripcion}</p>}
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

      <form onSubmit={handleSubmit} className="card space-y-6">
        <div>
          <label className="label-field">Su nombre (opcional)</label>
          <input
            className="input-field"
            value={respondidoPor}
            onChange={(e) => setRespondidoPor(e.target.value)}
            placeholder="Nombre del respondiente"
          />
        </div>

        {encuesta.preguntas.map((field) => (
          <div key={field.name}>
            <label className="label-field">
              {field.label}
              {field.required && <span className="text-red-500 ml-1">*</span>}
            </label>
            <FieldRenderer
              field={field}
              value={datos[field.name]}
              onChange={(val) => setDatos((prev) => ({ ...prev, [field.name]: val }))}
            />
          </div>
        ))}

        <button type="submit" className="btn-primary w-full" disabled={saving}>
          {saving ? 'Enviando...' : 'Enviar respuesta'}
        </button>
      </form>
    </div>
  );
}
