import React, { useState, useEffect, useCallback } from 'react';
import { workshop as workshopApi } from '../services/api.js';
import { useAuth } from '../services/AuthContext.jsx';
import { state, deserialize } from '../engine/state.js';
import { serialize } from '../engine/state.js';
import { rebuildGraph } from '../engine/audioEngine.js';

const TAGS = ['ambient', 'bass', 'drums', 'pad', 'lead', 'fx', 'chiptune', 'experimental'];

function ShareModal({ onClose, onShared }) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [selectedTags, setSelectedTags] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleShare = async () => {
    if (!title.trim()) { setError('Titulo requerido'); return; }
    if (state.modules.length === 0) { setError('No hay modulos en el canvas'); return; }

    setLoading(true);
    setError('');
    try {
      const patchData = serialize();
      await workshopApi.share({
        title: title.trim(),
        description: description.trim(),
        tags: selectedTags,
        data: patchData,
      });
      onShared?.();
      onClose();
    } catch (err) {
      setError(err.message);
    }
    setLoading(false);
  };

  return (
    <div className="auth-overlay" onClick={onClose}>
      <div className="auth-card" onClick={e => e.stopPropagation()} style={{ gap: 14 }}>
        <h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text)', margin: 0 }}>Compartir Patch</h2>

        <div className="auth-form" style={{ gap: 10 }}>
          <label className="auth-label">TITULO</label>
          <input className="auth-input" placeholder="Nombre de tu patch"
            value={title} onChange={e => setTitle(e.target.value)} />

          <label className="auth-label">DESCRIPCION</label>
          <textarea className="auth-input" placeholder="Describe tu creacion..."
            value={description} onChange={e => setDescription(e.target.value)}
            rows={3} style={{ resize: 'vertical', fontFamily: 'inherit' }} />

          <label className="auth-label">TAGS</label>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {TAGS.map(tag => (
              <button key={tag} type="button"
                className={`ws-tag ${selectedTags.includes(tag) ? 'active' : ''}`}
                onClick={() => setSelectedTags(prev =>
                  prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]
                )}
              >{tag}</button>
            ))}
          </div>

          {error && <div className="auth-error">{error}</div>}

          <button className="auth-submit" onClick={handleShare} disabled={loading}>
            {loading ? 'Compartiendo...' : 'Compartir'}
          </button>
        </div>

        <button className="auth-close" onClick={onClose}>✕</button>
      </div>
    </div>
  );
}

function PatchCard({ patch, onLoad, onLike }) {
  const moduleCount = patch.data?.modules?.length || 0;
  const wireCount = patch.data?.connections?.length || 0;

  return (
    <div className="ws-card">
      <div className="ws-card-preview">
        <span className="ws-card-wave">{moduleCount > 6 ? '~ ~ ~ ~' : '~ ~'}</span>
      </div>
      <div className="ws-card-body">
        <h3 className="ws-card-title">{patch.title}</h3>
        <p className="ws-card-author">por {patch.author?.username || 'Anonimo'}</p>
        {patch.tags?.length > 0 && (
          <div className="ws-card-tags">
            {patch.tags.map(t => <span key={t} className="ws-tag-pill">{t}</span>)}
          </div>
        )}
        <div className="ws-card-footer">
          <button className="ws-like-btn" onClick={() => onLike(patch.id)}>
            ♥ {patch.likesCount || 0}
          </button>
          <span className="ws-card-meta">{moduleCount} modules · {wireCount} wires</span>
          <button className="ws-load-btn" onClick={() => onLoad(patch)}>Cargar</button>
        </div>
      </div>
    </div>
  );
}

export default function Workshop({ onSwitchToSandbox, onSwitchToGame }) {
  const { isLoggedIn, openAuth, logout, user } = useAuth();
  const [patches, setPatches] = useState([]);
  const [search, setSearch] = useState('');
  const [activeTag, setActiveTag] = useState('');
  const [sort, setSort] = useState('recent');
  const [loading, setLoading] = useState(true);
  const [showShare, setShowShare] = useState(false);

  const loadPatches = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (search) params.set('q', search);
      if (activeTag) params.set('tags', activeTag);
      params.set('sort', sort);
      const data = await workshopApi.browse(params.toString());
      setPatches(data.patches || []);
    } catch (err) {
      console.warn('Workshop load failed:', err);
    }
    setLoading(false);
  }, [search, activeTag, sort]);

  useEffect(() => { loadPatches(); }, [loadPatches]);

  const handleLoad = (patch) => {
    if (patch.data) {
      deserialize(patch.data);
      if (state.isRunning) rebuildGraph();
      onSwitchToSandbox?.();
    }
  };

  const handleLike = async (patchId) => {
    if (!isLoggedIn) { openAuth(); return; }
    try {
      await workshopApi.like(patchId);
      loadPatches();
    } catch {}
  };

  const handleShare = () => {
    if (!isLoggedIn) { openAuth(); return; }
    setShowShare(true);
  };

  return (
    <div className="ws-page">
      <nav className="ws-nav">
        <div className="ws-nav-logo">
          <div className="auth-logo-box" style={{ width: 32, height: 32, fontSize: 16 }}>~</div>
          <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)' }}>Reaktor</span>
        </div>
        <div className="ws-nav-tabs">
          <button className="ws-nav-tab" onClick={onSwitchToSandbox}>Sandbox</button>
          <button className="ws-nav-tab" onClick={onSwitchToGame}>SynthQuest</button>
          <button className="ws-nav-tab active">Workshop</button>
        </div>
        <div style={{ flex: 1 }} />
        {isLoggedIn ? (
          <div className="user-badge" onClick={logout} title="Cerrar sesion">
            <div className="user-avatar">{user?.username?.[0]?.toUpperCase()}</div>
            <span className="user-name">{user?.username}</span>
          </div>
        ) : (
          <button className="login-btn" onClick={openAuth}>Entrar</button>
        )}
      </nav>

      <div className="ws-header">
        <h1 className="ws-title">Workshop</h1>
        <p className="ws-subtitle">Explora, comparte y descubre sonidos de la comunidad</p>
      </div>

      <div className="ws-toolbar">
        <div className="ws-search">
          <span>🔍</span>
          <input placeholder="Buscar patches..." value={search}
            onChange={e => setSearch(e.target.value)} />
        </div>

        <div className="ws-tags">
          <button className={`ws-tag ${!activeTag ? 'active' : ''}`}
            onClick={() => setActiveTag('')}>Todos</button>
          {TAGS.slice(0, 5).map(tag => (
            <button key={tag} className={`ws-tag ${activeTag === tag ? 'active' : ''}`}
              onClick={() => setActiveTag(activeTag === tag ? '' : tag)}>{tag}</button>
          ))}
        </div>

        <select className="ws-sort" value={sort} onChange={e => setSort(e.target.value)}>
          <option value="recent">Recientes</option>
          <option value="popular">Popular</option>
        </select>

        <button className="ws-share-btn" onClick={handleShare}>
          + Compartir Patch
        </button>
      </div>

      <div className="ws-grid">
        {loading ? (
          <p style={{ color: 'var(--text2)', gridColumn: '1/-1', textAlign: 'center', padding: 40 }}>
            Cargando...
          </p>
        ) : patches.length === 0 ? (
          <p style={{ color: 'var(--text2)', gridColumn: '1/-1', textAlign: 'center', padding: 40 }}>
            No hay patches aun. Se el primero en compartir!
          </p>
        ) : (
          patches.map(p => (
            <PatchCard key={p.id} patch={p} onLoad={handleLoad} onLike={handleLike} />
          ))
        )}
      </div>

      {showShare && <ShareModal onClose={() => setShowShare(false)} onShared={loadPatches} />}
    </div>
  );
}