import React, { useState } from 'react';
import { Mail, LogOut, Stethoscope, Clock, CheckCircle2, ArrowRight, MapPin, Users, Wrench, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { useAppVersion } from '../buildInfo.ts';

const UF_LIST = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO'];

const API_URL = (window as any).__API_URL__ || '';

const ROLE_CONFIG: Record<string, { label: string; icon: React.ElementType; color: string; desc: string }> = {
    dentista:  { label: 'Dentista',  icon: Stethoscope, color: 'blue',   desc: 'dentista disponível para contratação' },
    protetico: { label: 'Protético', icon: Wrench,      color: 'purple', desc: 'protético disponível para laboratório' },
};

export const WaitingInviteView: React.FC = () => {
    const ver = useAppVersion();
    const userData  = localStorage.getItem('SCOREODONTO_USER_DATA');
    const user      = userData ? JSON.parse(userData) : null;
    const role      = user?.role ?? 'dentista';
    const cfg       = ROLE_CONFIG[role] ?? ROLE_CONFIG['dentista'];
    const email     = user?.email ?? '';
    const RoleIcon  = cfg.icon;

    const [showDiretorio, setShowDiretorio] = useState(false);
    const [estado,        setEstado]        = useState('');
    const [cidade,        setCidade]        = useState('');
    const [bairro,        setBairro]        = useState('');
    const [especialidade, setEspecialidade] = useState('');
    const [saving,        setSaving]        = useState(false);
    const [saved,         setSaved]         = useState(false);
    const [saveError,     setSaveError]     = useState('');

    const steps = [
        { icon: CheckCircle2, label: 'Conta criada',        done: true  },
        { icon: Mail,         label: 'Aguardando convite',  done: false },
        { icon: ArrowRight,   label: 'Acesso à clínica',    done: false },
    ];

    const handleSaveDiretorio = async () => {
        if (!estado || !cidade) { setSaveError('Estado e cidade são obrigatórios.'); return; }
        setSaving(true); setSaveError('');
        try {
            const token = localStorage.getItem('SCOREODONTO_AUTH_TOKEN');
            const res = await fetch(`${API_URL}/api/usuarios/localidade`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
                body: JSON.stringify({ estado, cidade, bairro, especialidade, disponivel_diretorio: true }),
            });
            const data = await res.json();
            if (!res.ok || !data.success) { setSaveError(data.message || 'Erro ao salvar.'); }
            else setSaved(true);
        } catch { setSaveError('Erro de conexão.'); }
        finally { setSaving(false); }
    };

    const colorMap: Record<string, string> = {
        blue: 'from-teal-600 to-emerald-600',
        purple: 'from-purple-600 to-violet-600',
    };

    return (
        <div className="min-h-screen bg-[#F8FAFC] flex flex-col items-center justify-center px-4 py-12">

            {/* Logo */}
            <div className="flex items-center gap-2 mb-10">
                <div className={`w-9 h-9 bg-gradient-to-tr ${colorMap[cfg.color]} rounded-xl flex items-center justify-center shadow-md`}>
                    <Stethoscope size={18} className="text-white" />
                </div>
                <span className="text-xl font-black text-gray-900 tracking-tighter uppercase italic">
                    Score<span className="text-teal-600">Odonto</span>
                </span>
            </div>

            {/* Card */}
            <div className="w-full max-w-md bg-white rounded-3xl border border-gray-100 shadow-[0_20px_60px_rgba(0,0,0,0.07)] overflow-hidden">
                <div className={`h-1 bg-gradient-to-r ${colorMap[cfg.color]}`} />

                <div className="px-8 py-10 text-center">
                    {/* Icon */}
                    <div className={`w-20 h-20 bg-${cfg.color}-50 border border-${cfg.color}-100 rounded-3xl flex items-center justify-center mx-auto mb-6`}>
                        <RoleIcon size={36} className={`text-${cfg.color}-600`} />
                    </div>

                    <h1 className="text-2xl font-black text-gray-900 tracking-tighter mb-2">
                        Conta criada com sucesso!
                    </h1>
                    <p className="text-gray-500 text-sm font-medium leading-relaxed mb-8">
                        Seu perfil de <strong className="text-gray-700">{cfg.label}</strong> foi registrado.
                        {role === 'protetico'
                            ? ' Para acessar o sistema, você precisa ser convidado por um laboratório ou clínica.'
                            : ' Para acessar o sistema, você precisa ser convidado pelo administrador de uma clínica ou consultório.'}
                    </p>

                    {/* Steps */}
                    <div className="flex items-center justify-center gap-0 mb-8">
                        {steps.map((step, i) => {
                            const Icon = step.icon;
                            return (
                                <React.Fragment key={i}>
                                    <div className="flex flex-col items-center gap-1.5">
                                        <div className={`w-10 h-10 rounded-2xl flex items-center justify-center ${
                                            step.done
                                                ? 'bg-green-100 text-green-600'
                                                : i === 1
                                                    ? `bg-${cfg.color}-100 text-${cfg.color}-600 ring-2 ring-${cfg.color}-200 ring-offset-1`
                                                    : 'bg-gray-100 text-gray-400'
                                        }`}>
                                            <Icon size={18} />
                                        </div>
                                        <span className={`text-[9px] font-black uppercase tracking-widest ${
                                            step.done ? 'text-green-600' : i === 1 ? `text-${cfg.color}-600` : 'text-gray-400'
                                        }`}>{step.label}</span>
                                    </div>
                                    {i < steps.length - 1 && (
                                        <div className={`w-12 h-px mb-5 ${step.done ? 'bg-green-200' : 'bg-gray-200'}`} />
                                    )}
                                </React.Fragment>
                            );
                        })}
                    </div>

                    {/* Info box */}
                    <div className="bg-teal-50 border border-teal-100 rounded-2xl p-4 text-left mb-4">
                        <p className="text-[10px] font-black text-teal-600 uppercase tracking-widest mb-1">
                            O que fazer agora?
                        </p>
                        <ul className="space-y-1.5 text-sm text-teal-800 font-medium">
                            <li className="flex items-start gap-2">
                                <span className="text-teal-400 mt-0.5">1.</span>
                                Informe seu e-mail <strong>{email}</strong> ao administrador
                            </li>
                            <li className="flex items-start gap-2">
                                <span className="text-teal-400 mt-0.5">2.</span>
                                Aguarde o convite ser enviado
                            </li>
                            <li className="flex items-start gap-2">
                                <span className="text-teal-400 mt-0.5">3.</span>
                                Acesse o link do convite para completar o vínculo
                            </li>
                        </ul>
                    </div>

                    {/* Diretório de profissionais */}
                    <div className="border border-purple-100 bg-purple-50 rounded-2xl overflow-hidden mb-6">
                        <button
                            type="button"
                            onClick={() => setShowDiretorio(v => !v)}
                            className="w-full flex items-center justify-between gap-3 p-4 text-left"
                        >
                            <div className="flex items-center gap-3">
                                <div className="w-8 h-8 bg-purple-100 rounded-xl flex items-center justify-center">
                                    <Users size={16} className="text-purple-600" />
                                </div>
                                <div>
                                    <p className="text-xs font-black text-purple-800 uppercase tracking-wide">Apareça no Diretório</p>
                                    <p className="text-[10px] text-purple-600 font-medium">Clínicas encontram você por localização</p>
                                </div>
                            </div>
                            {showDiretorio ? <ChevronUp size={16} className="text-purple-400" /> : <ChevronDown size={16} className="text-purple-400" />}
                        </button>

                        {showDiretorio && (
                            <div className="px-4 pb-4 space-y-3 border-t border-purple-100 pt-3">
                                {saved ? (
                                    <div className="flex items-center gap-2 text-green-700 bg-green-50 rounded-xl p-3">
                                        <CheckCircle2 size={18} />
                                        <span className="text-xs font-black uppercase">Perfil publicado no diretório!</span>
                                    </div>
                                ) : (
                                    <>
                                        <p className="text-[11px] text-purple-700 font-medium">
                                            Preencha sua localização para que clínicas e consultórios possam te contratar como {cfg.desc}.
                                        </p>
                                        <div className="grid grid-cols-2 gap-2">
                                            <select
                                                value={estado}
                                                onChange={e => setEstado(e.target.value)}
                                                className="w-full px-3 py-2 bg-white border border-purple-200 rounded-lg text-xs font-bold text-gray-700 outline-none focus:border-purple-400"
                                            >
                                                <option value="">Estado *</option>
                                                {UF_LIST.map(uf => <option key={uf}>{uf}</option>)}
                                            </select>
                                            <input
                                                type="text"
                                                value={cidade}
                                                onChange={e => setCidade(e.target.value.toUpperCase())}
                                                placeholder="Cidade *"
                                                className="w-full px-3 py-2 bg-white border border-purple-200 rounded-lg text-xs font-bold text-gray-700 outline-none focus:border-purple-400 uppercase"
                                            />
                                        </div>
                                        <div className="grid grid-cols-2 gap-2">
                                            <input
                                                type="text"
                                                value={bairro}
                                                onChange={e => setBairro(e.target.value.toUpperCase())}
                                                placeholder="Bairro"
                                                className="w-full px-3 py-2 bg-white border border-purple-200 rounded-lg text-xs font-bold text-gray-700 outline-none focus:border-purple-400 uppercase"
                                            />
                                            <input
                                                type="text"
                                                value={especialidade}
                                                onChange={e => setEspecialidade(e.target.value.toUpperCase())}
                                                placeholder={role === 'protetico' ? 'Especialidade (ex: METAL)' : 'Especialidade (ex: ORTO)'}
                                                className="w-full px-3 py-2 bg-white border border-purple-200 rounded-lg text-xs font-bold text-gray-700 outline-none focus:border-purple-400 uppercase"
                                            />
                                        </div>
                                        {saveError && <p className="text-xs text-red-600 font-bold">{saveError}</p>}
                                        <button
                                            type="button"
                                            onClick={handleSaveDiretorio}
                                            disabled={saving}
                                            className="w-full bg-purple-600 hover:bg-purple-700 text-white py-2.5 rounded-xl text-xs font-black uppercase tracking-widest flex items-center justify-center gap-2 disabled:opacity-50 transition-colors"
                                        >
                                            {saving ? <Loader2 size={14} className="animate-spin" /> : <MapPin size={14} />}
                                            Publicar no Diretório
                                        </button>
                                    </>
                                )}
                            </div>
                        )}
                    </div>

                    <button
                        onClick={() => HybridBackend.logout()}
                        className="flex items-center gap-2 mx-auto text-xs font-black text-gray-400 hover:text-red-500 uppercase tracking-widest transition-colors"
                    >
                        <LogOut size={14} />
                        Sair da conta
                    </button>
                </div>

                <div className="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-center">
                    <span className="text-[10px] font-black text-gray-400 uppercase tracking-widest">{ver.version}</span>
                </div>
            </div>
        </div>
    );
};