import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Play,
  Square,
  Zap,
  BatteryCharging,
  Clock,
  Activity,
  Loader2,
  ArrowLeft,
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { SectionCard } from '@/components/ui/SectionCard';
import { getAuthHeader } from '@/utils/apiAuthHeader';
import { useToast } from '@/components/ToastContext';

export default function ChargerDashboard() {
  const { chargerId } = useParams();  // Obter o chargerId da URL
  const [dados, setDados] = useState(null);
  const [ampLimit, setAmpLimit] = useState(6);
  const [maxAmps, setMaxAmps] = useState(32);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const navigate = useNavigate();
  const showToast = useToast();

  // Buscar status do carregador
  useEffect(() => {
    if (!chargerId) {
      setError("Carregador não encontrado!");
      setLoading(false);
      return;
    }

    let cancelado = false;
    async function fetchStatus() {
      setLoading(true);
      setError('');
      try {
        const res = await fetch(`/api/chargers/${chargerId}/status`, {
          headers: getAuthHeader(),
        });
        const json = await res.json();
        if (!res.ok || !json.success) throw new Error(json.message || 'Erro ao obter status');
        if (!cancelado) {
          setDados(json.data);
          setAmpLimit(json.data.ampLimit ?? 6);
          setMaxAmps(json.data.maxAmps ?? 32);
        }
      } catch (err) {
        if (!cancelado) setError(err.message || 'Falha ao buscar status');
      } finally {
        if (!cancelado) setLoading(false);
      }
    }
    fetchStatus();
    const interval = setInterval(fetchStatus, 8000);
    return () => {
      cancelado = true;
      clearInterval(interval);
    };
  }, [chargerId]);  // Atualizar a requisição sempre que o chargerId mudar

  // Enviar comandos (iniciar/parar carregamento)
  async function handleAction(action) {
    if (!chargerId) return;  // Adicionar verificação extra para chargerId

    setBusy(true);
    try {
      const res = await fetch(`/api/chargers/${chargerId}/${action}`, {
        method: 'POST',
        headers: {
          ...getAuthHeader(),
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ ampLimit }),
      });
      const json = await res.json();
      if (!res.ok || !json.success) throw new Error(json.message || 'Erro ao enviar comando');
      setDados(json.data);
      showToast(
        action === 'start' ? 'Carregamento iniciado' : 'Carregamento parado',
        'success'
      );
      setError('');
    } catch (err) {
      setError(err.message);
      showToast(err.message, 'error');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="max-w-2xl mx-auto p-4 pb-24">
      <button
        className="mb-2 flex items-center gap-2 text-blue-600 hover:underline focus:outline-none"
        onClick={() => navigate(-1)}
      >
        <ArrowLeft size={18} /> Voltar
      </button>
      <SectionCard
        title={dados?.nome ? `Carregador: ${dados.nome}` : 'Carregador'}
        icon={<Zap className="text-blue-600" />}
      >
        {error && (
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="text-red-500 text-sm mb-4"
            aria-live="polite"
          >
            {error}
          </motion.p>
        )}

        {(loading || busy) ? (
          <div className="flex flex-col items-center justify-center py-8">
            <Loader2 className="animate-spin text-blue-500" size={40} />
            <span className="text-blue-600 mt-2">
              {busy ? 'Enviando comando...' : 'Carregando status...'}
            </span>
          </div>
        ) : (
          dados && (
            <>
              {/* Potência em destaque */}
              <AnimatePresence mode="wait">
                <motion.div
                  key={dados.potenciaAtual}
                  initial={{ scale: 0.85, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0.85, opacity: 0 }}
                  transition={{ duration: 0.5 }}
                  className="relative w-40 h-40 mx-auto mb-8 select-none"
                >
                  <div
                    className={`absolute inset-0 rounded-full border-8 
                    ${dados.potenciaAtual > 7
                      ? 'border-yellow-400 opacity-60'
                      : 'border-blue-200 opacity-30'}`}
                  />
                  <div
                    className={`absolute inset-2 rounded-full border-8 
                    ${dados.currentPower > 7
                      ? 'border-yellow-500'
                      : 'border-blue-600'} 
                    flex flex-col items-center justify-center text-blue-700`}
                  >
                    <motion.div
                      initial={{ rotate: -10 }}
                      animate={{ rotate: [0, 12, -12, 0] }}
                      transition={{
                        duration: 1,
                        repeat: Infinity,
                        repeatType: 'mirror',
                        ease: 'easeInOut',
                      }}
                      className={`mb-1 ${
                        dados.currentPower > 7
                          ? 'text-yellow-500'
                          : 'text-blue-600'
                      }`}
                    >
                      <Zap size={32} />
                    </motion.div>
                    <span className="text-4xl font-extrabold drop-shadow">
                      {dados.currentPower} kW
                    </span>
                    <span className="text-xs text-gray-400 font-medium mt-1 tracking-wide">
                      Potência
                    </span>
                  </div>
                </motion.div>
              </AnimatePresence>

              {/* Informações detalhadas */}
              <div className="grid gap-5 text-sm text-gray-700 mb-8">
                <InfoItem
                  icon={<BatteryCharging className="text-blue-500" />}
                  label="Estado"
                  value={dados.status}
                  valueClass="text-blue-600"
                />
                <InfoItem
                  icon={<Clock className="text-gray-500" />}
                  label="Tempo de carregamento"
                  value={dados.timeRemaining}
                />
                <InfoItem
                  icon={<Zap className="text-yellow-500" />}
                  label="Potência"
                  value={
                    <span className="text-lg font-bold text-yellow-600">
                      {dados.potenciaAtual} kW
                    </span>
                  }
                />
                <InfoItem
                  icon={<Activity className="text-indigo-500" />}
                  label="Modo"
                  value={dados.modo?.toUpperCase()}
                  valueClass="text-indigo-600 font-bold"
                />
              </div>

              {/* Slider para Amperagem */}
              <div className="mb-10">
                <label
                  htmlFor="amp-range"
                  className="flex items-center gap-3 text-base font-medium text-gray-800 mb-4"
                >
                  <Zap className="text-gray-600" size={20} />
                  Corrente máxima:{' '}
                  <span className="text-blue-700 font-semibold">
                    {ampLimit} A
                  </span>
                </label>
                <input
                  id="amp-range"
                  type="range"
                  min={6}
                  max={maxAmps}
                  value={ampLimit}
                  onChange={(e) => setAmpLimit(Number(e.target.value))}
                  className="w-full accent-blue-600"
                  aria-valuenow={ampLimit}
                  aria-valuemin={6}
                  aria-valuemax={maxAmps}
                  disabled={busy}
                />
                <div className="flex justify-between text-xs text-gray-500 mt-1">
                  <span>6 A</span>
                  <span>{maxAmps} A</span>
                </div>
              </div>

              {/* Botões */}
              <div className="flex justify-center gap-4 mt-8">
                <motion.button
                  whileTap={{ scale: 0.95 }}
                  onClick={() => handleAction('start')}
                  className="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow font-medium transition flex items-center gap-2 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-400"
                  disabled={busy}
                  aria-label="Iniciar carregamento"
                >
                  <Play size={18} /> Iniciar
                </motion.button>
                <motion.button
                  whileTap={{ scale: 0.95 }}
                  onClick={() => handleAction('stop')}
                  className="bg-red-500 hover:bg-red-600 text-white px-5 py-2 rounded-xl shadow font-medium transition flex items-center gap-2 active:scale-95 focus:outline-none focus:ring-2 focus:ring-red-400"
                  disabled={busy}
                  aria-label="Parar carregamento"
                >
                  <Square size={18} /> Parar
                </motion.button>
              </div>
            </>
          )
        )}
      </SectionCard>
    </div>
  );
}

function InfoItem({ icon, label, value, valueClass = '' }) {
  return (
    <div className="grid grid-cols-2 items-center gap-2 py-1.5">
      <div className="flex items-center gap-2 text-gray-600 font-medium">
        {icon}
        <span>{label}</span>
      </div>
      <div className={`text-right text-base font-semibold ${valueClass}`}>
        {value}
      </div>
    </div>
  );
}