import { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { validateCharacter } from '../lib/SchemaValidator';

const ACTIVE_KEY = 'homeai_active_character';

function getActiveId() {
  return localStorage.getItem(ACTIVE_KEY) || null;
}

function setActiveId(id) {
  localStorage.setItem(ACTIVE_KEY, id);
}

export default function Characters() {
  const [profiles, setProfiles] = useState([]);
  const [activeId, setActive] = useState(getActiveId);
  const [error, setError] = useState(null);
  const [dragOver, setDragOver] = useState(false);
  const [loading, setLoading] = useState(true);
  const [satMap, setSatMap] = useState({ default: '', satellites: {} });
  const [newSatId, setNewSatId] = useState('');
  const [newSatChar, setNewSatChar] = useState('');
  const navigate = useNavigate();

  // Load profiles and satellite map on mount
  useEffect(() => {
    Promise.all([
      fetch('/api/characters').then(r => r.json()),
      fetch('/api/satellite-map').then(r => r.json()),
    ])
      .then(([chars, map]) => {
        setProfiles(chars);
        setSatMap(map);
        setLoading(false);
      })
      .catch(err => { setError(`Failed to load: ${err.message}`); setLoading(false); });
  }, []);

  const saveSatMap = useCallback(async (updated) => {
    setSatMap(updated);
    await fetch('/api/satellite-map', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updated),
    });
  }, []);

  const saveProfile = useCallback(async (profile) => {
    const res = await fetch('/api/characters', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(profile),
    });
    if (!res.ok) throw new Error('Failed to save profile');
  }, []);

  const deleteProfile = useCallback(async (id) => {
    const safeId = id.replace(/[^a-zA-Z0-9_\-\.]/g, '_');
    await fetch(`/api/characters/${safeId}`, { method: 'DELETE' });
  }, []);

  const handleImport = (e) => {
    const files = Array.from(e.target?.files || []);
    importFiles(files);
    if (e.target) e.target.value = '';
  };

  const importFiles = (files) => {
    files.forEach(file => {
      if (!file.name.endsWith('.json')) return;
      const reader = new FileReader();
      reader.onload = async (ev) => {
        try {
          const data = JSON.parse(ev.target.result);
          validateCharacter(data);
          const id = data.name + '_' + Date.now();
          const profile = { id, data, image: null, addedAt: new Date().toISOString() };
          await saveProfile(profile);
          setProfiles(prev => [...prev, profile]);
          setError(null);
        } catch (err) {
          setError(`Import failed for ${file.name}: ${err.message}`);
        }
      };
      reader.readAsText(file);
    });
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setDragOver(false);
    const files = Array.from(e.dataTransfer.files);
    importFiles(files);
  };

  const handleImageUpload = (profileId, e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = async (ev) => {
      const updated = profiles.map(p => p.id === profileId ? { ...p, image: ev.target.result } : p);
      const profile = updated.find(p => p.id === profileId);
      if (profile) await saveProfile(profile);
      setProfiles(updated);
    };
    reader.readAsDataURL(file);
  };

  const removeProfile = async (id) => {
    await deleteProfile(id);
    setProfiles(prev => prev.filter(p => p.id !== id));
    if (activeId === id) {
      setActive(null);
      localStorage.removeItem(ACTIVE_KEY);
    }
  };

  const activateProfile = (id) => {
    setActive(id);
    setActiveId(id);

    // Sync active character's TTS settings to chat settings
    const profile = profiles.find(p => p.id === id);
    if (profile?.data?.tts) {
      const tts = profile.data.tts;
      const engine = tts.engine || 'kokoro';
      let voice;
      if (engine === 'kokoro') voice = tts.kokoro_voice || 'af_heart';
      else if (engine === 'elevenlabs') voice = tts.elevenlabs_voice_id || '';
      else if (engine === 'chatterbox') voice = tts.voice_ref_path || '';
      else voice = '';

      try {
        const raw = localStorage.getItem('homeai_dashboard_settings');
        const settings = raw ? JSON.parse(raw) : {};
        localStorage.setItem('homeai_dashboard_settings', JSON.stringify({
          ...settings,
          ttsEngine: engine,
          voice: voice,
        }));
      } catch { /* ignore */ }
    }
  };

  const exportProfile = (profile) => {
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(profile.data, null, 2));
    const a = document.createElement('a');
    a.href = dataStr;
    a.download = `${profile.data.name || 'character'}.json`;
    a.click();
  };

  const editProfile = (profile) => {
    sessionStorage.setItem('edit_character', JSON.stringify(profile.data));
    sessionStorage.setItem('edit_character_profile_id', profile.id);
    navigate('/editor');
  };

  const activeProfile = profiles.find(p => p.id === activeId);

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-100">Characters</h1>
          <p className="text-sm text-gray-500 mt-1">
            {profiles.length} profile{profiles.length !== 1 ? 's' : ''} stored
            {activeProfile && (
              <span className="ml-2 text-emerald-400">
                Active: {activeProfile.data.display_name || activeProfile.data.name}
              </span>
            )}
          </p>
        </div>
        <div className="flex gap-3">
          <button
            onClick={() => {
              sessionStorage.removeItem('edit_character');
              sessionStorage.removeItem('edit_character_profile_id');
              navigate('/editor');
            }}
            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
            New Character
          </button>
          <label className="flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg cursor-pointer border border-gray-700 transition-colors">
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
            </svg>
            Import JSON
            <input type="file" accept=".json" multiple className="hidden" onChange={handleImport} />
          </label>
        </div>
      </div>

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

      {/* Drop zone */}
      <div
        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
        onDragLeave={() => setDragOver(false)}
        onDrop={handleDrop}
        className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
          dragOver
            ? 'border-indigo-500 bg-indigo-500/10'
            : 'border-gray-700 hover:border-gray-600'
        }`}
      >
        <svg className="w-10 h-10 mx-auto text-gray-600 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
        </svg>
        <p className="text-gray-500 text-sm">Drop character JSON files here to import</p>
      </div>

      {/* Profile grid */}
      {loading ? (
        <div className="text-center py-16">
          <p className="text-gray-500">Loading characters...</p>
        </div>
      ) : profiles.length === 0 ? (
        <div className="text-center py-16">
          <svg className="w-16 h-16 mx-auto text-gray-700 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
          </svg>
          <p className="text-gray-500">No character profiles yet. Import a JSON file to get started.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {profiles.map(profile => {
            const isActive = profile.id === activeId;
            const char = profile.data;
            return (
              <div
                key={profile.id}
                className={`relative rounded-xl border overflow-hidden transition-all duration-200 ${
                  isActive
                    ? 'border-emerald-500/60 bg-emerald-500/5 ring-1 ring-emerald-500/30'
                    : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
                }`}
              >
                {/* Image area */}
                <div className="relative h-48 bg-gray-900 flex items-center justify-center overflow-hidden group">
                  {profile.image ? (
                    <img
                      src={profile.image}
                      alt={char.display_name || char.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="text-6xl font-bold text-gray-700 select-none">
                      {(char.display_name || char.name || '?')[0].toUpperCase()}
                    </div>
                  )}
                  <label className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
                    <div className="text-center">
                      <svg className="w-8 h-8 mx-auto text-white/80 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" />
                      </svg>
                      <span className="text-xs text-white/70">Change image</span>
                    </div>
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => handleImageUpload(profile.id, e)}
                    />
                  </label>
                  {isActive && (
                    <span className="absolute top-2 right-2 px-2 py-0.5 bg-emerald-500 text-white text-xs font-medium rounded-full">
                      Active
                    </span>
                  )}
                </div>

                {/* Info */}
                <div className="p-4 space-y-3">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-200">
                      {char.display_name || char.name}
                    </h3>
                    <p className="text-xs text-gray-500 mt-0.5">{char.description}</p>
                  </div>

                  <div className="flex flex-wrap gap-1.5">
                    <span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full">
                      {char.tts?.engine || 'kokoro'}
                    </span>
                    <span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full">
                      {char.model_overrides?.primary || 'default'}
                    </span>
                    {char.tts?.engine === 'kokoro' && char.tts?.kokoro_voice && (
                      <span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full">
                        {char.tts.kokoro_voice}
                      </span>
                    )}
                    {char.tts?.engine === 'elevenlabs' && char.tts?.elevenlabs_voice_id && (
                      <span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full" title={char.tts.elevenlabs_voice_id}>
                        {char.tts.elevenlabs_voice_name || char.tts.elevenlabs_voice_id.slice(0, 8) + '…'}
                      </span>
                    )}
                    {char.tts?.engine === 'chatterbox' && char.tts?.voice_ref_path && (
                      <span className="px-2 py-0.5 bg-gray-700/70 text-gray-400 text-xs rounded-full" title={char.tts.voice_ref_path}>
                        {char.tts.voice_ref_path.split('/').pop()}
                      </span>
                    )}
                    {(() => {
                      const defaultPreset = char.gaze_presets?.find(gp => gp.trigger === 'self-portrait')?.preset
                        || char.gaze_presets?.[0]?.preset
                        || char.gaze_preset
                        || null;
                      return defaultPreset ? (
                        <span className="px-2 py-0.5 bg-violet-500/20 text-violet-300 text-xs rounded-full border border-violet-500/30" title={`GAZE: ${defaultPreset}`}>
                          {defaultPreset}
                        </span>
                      ) : null;
                    })()}
                  </div>

                  <div className="flex gap-2 pt-1">
                    {!isActive ? (
                      <button
                        onClick={() => activateProfile(profile.id)}
                        className="flex-1 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white text-sm rounded-lg transition-colors"
                      >
                        Activate
                      </button>
                    ) : (
                      <button
                        disabled
                        className="flex-1 px-3 py-1.5 bg-gray-700 text-gray-500 text-sm rounded-lg cursor-not-allowed"
                      >
                        Active
                      </button>
                    )}
                    <button
                      onClick={() => editProfile(profile)}
                      className="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 text-sm rounded-lg transition-colors"
                      title="Edit"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                      </svg>
                    </button>
                    <button
                      onClick={() => exportProfile(profile)}
                      className="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 text-sm rounded-lg transition-colors"
                      title="Export"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                      </svg>
                    </button>
                    <button
                      onClick={() => removeProfile(profile.id)}
                      className="px-3 py-1.5 bg-gray-700 hover:bg-red-600 text-gray-300 hover:text-white text-sm rounded-lg transition-colors"
                      title="Delete"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Satellite Assignment */}
      {!loading && profiles.length > 0 && (
        <div className="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4">
          <div>
            <h2 className="text-lg font-semibold text-gray-200">Satellite Routing</h2>
            <p className="text-xs text-gray-500 mt-1">Assign characters to voice satellites. Unmapped satellites use the default.</p>
          </div>

          {/* Default character */}
          <div className="flex items-center gap-3">
            <label className="text-sm text-gray-400 w-32 shrink-0">Default</label>
            <select
              value={satMap.default || ''}
              onChange={(e) => saveSatMap({ ...satMap, default: e.target.value })}
              className="flex-1 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
            >
              <option value="">-- None --</option>
              {profiles.map(p => (
                <option key={p.id} value={p.id}>{p.data.display_name || p.data.name}</option>
              ))}
            </select>
          </div>

          {/* Per-satellite assignments */}
          {Object.entries(satMap.satellites || {}).map(([satId, charId]) => (
            <div key={satId} className="flex items-center gap-3">
              <span className="text-sm text-gray-300 w-32 shrink-0 truncate font-mono" title={satId}>{satId}</span>
              <select
                value={charId}
                onChange={(e) => {
                  const updated = { ...satMap, satellites: { ...satMap.satellites, [satId]: e.target.value } };
                  saveSatMap(updated);
                }}
                className="flex-1 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
              >
                {profiles.map(p => (
                  <option key={p.id} value={p.id}>{p.data.display_name || p.data.name}</option>
                ))}
              </select>
              <button
                onClick={() => {
                  const { [satId]: _, ...rest } = satMap.satellites;
                  saveSatMap({ ...satMap, satellites: rest });
                }}
                className="px-2 py-1.5 bg-gray-700 hover:bg-red-600 text-gray-400 hover:text-white rounded-lg transition-colors"
                title="Remove"
              >
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          ))}

          {/* Add new satellite */}
          <div className="flex items-center gap-3 pt-2 border-t border-gray-800">
            <input
              type="text"
              value={newSatId}
              onChange={(e) => setNewSatId(e.target.value)}
              placeholder="Satellite ID (from bridge log)"
              className="w-32 shrink-0 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500 font-mono"
            />
            <select
              value={newSatChar}
              onChange={(e) => setNewSatChar(e.target.value)}
              className="flex-1 bg-gray-800 text-gray-200 text-sm rounded-lg px-3 py-2 border border-gray-700 focus:outline-none focus:border-indigo-500"
            >
              <option value="">-- Select Character --</option>
              {profiles.map(p => (
                <option key={p.id} value={p.id}>{p.data.display_name || p.data.name}</option>
              ))}
            </select>
            <button
              onClick={() => {
                if (newSatId && newSatChar) {
                  saveSatMap({ ...satMap, satellites: { ...satMap.satellites, [newSatId]: newSatChar } });
                  setNewSatId('');
                  setNewSatChar('');
                }
              }}
              disabled={!newSatId || !newSatChar}
              className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm rounded-lg transition-colors"
            >
              Add
            </button>
          </div>
        </div>
      )}
    </div>
  );
}