import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { api } from '../api'
import ConfirmModal from './ConfirmModal'

const statusLabels = { draft: 'Bozza', approved: 'Approvato', scheduled: 'Schedulato', published: 'Pubblicato' }
const statusColors = {
  draft: { bg: '#FFFBEB', color: '#B45309' },
  approved: { bg: 'var(--success-light)', color: 'var(--success)' },
  scheduled: { bg: '#EFF6FF', color: '#1D4ED8' },
  published: { bg: '#F5F3FF', color: '#6D28D9' },
}

function groupByBatch(posts) {
  const groups = []
  const batchMap = {}
  for (const post of posts) {
    const key = post.batch_id || `solo_${post.id}`
    if (batchMap[key]) {
      batchMap[key].posts.push(post)
    } else {
      const group = { key, posts: [post] }
      batchMap[key] = group
      groups.push(group)
    }
  }
  return groups
}

export default function ContentArchive() {
  const [posts, setPosts] = useState([])
  const [characters, setCharacters] = useState([])
  const [loading, setLoading] = useState(true)
  const [expandedKey, setExpandedKey] = useState(null)
  const [activePlatform, setActivePlatform] = useState({})  // key → index
  const [editingId, setEditingId] = useState(null)
  const [editText, setEditText] = useState('')
  const [filterCharacter, setFilterCharacter] = useState('')
  const [filterStatus, setFilterStatus] = useState('')
  const [deleteTarget, setDeleteTarget] = useState(null)  // { id, batchKey }

  useEffect(() => { loadData() }, [])

  const loadData = async () => {
    setLoading(true)
    try {
      const [postsData, charsData] = await Promise.all([api.get('/content/posts'), api.get('/characters/')])
      setPosts(postsData)
      setCharacters(charsData)
    } catch {} finally { setLoading(false) }
  }

  const getCharacterName = (id) => characters.find(c => c.id === id)?.name || '—'

  const handleApprove = async (postId) => {
    try { await api.post(`/content/posts/${postId}/approve`); loadData() } catch {}
  }

  const handleDelete = async () => {
    if (!deleteTarget) return
    try {
      await api.delete(`/content/posts/${deleteTarget.id}`)
      setDeleteTarget(null)
      loadData()
    } catch {}
  }

  const handleSaveEdit = async (postId) => {
    try {
      await api.put(`/content/posts/${postId}`, { text_content: editText })
      setEditingId(null)
      loadData()
    } catch {}
  }

  const filtered = posts.filter(p => {
    if (filterCharacter && String(p.character_id) !== filterCharacter) return false
    if (filterStatus && p.status !== filterStatus) return false
    return true
  })

  const groups = groupByBatch(filtered)

  const formatDate = (d) => d ? new Date(d).toLocaleDateString('it-IT', { day: '2-digit', month: 'short', year: 'numeric' }) : '—'

  return (
    <div style={{ animation: 'fade-up 0.5s ease-out both' }}>
      <div style={{ marginBottom: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <span className="editorial-tag">Libreria</span>
          <div className="editorial-line" />
          <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: '1.75rem', fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--ink)', margin: '0.5rem 0 0.3rem' }}>
            Libreria Contenuti
          </h2>
          <p style={{ fontSize: '0.875rem', color: 'var(--ink-muted)', margin: 0 }}>I tuoi contenuti generati</p>
        </div>
        <Link to="/content" style={{ fontSize: '0.8rem', color: 'var(--accent)', textDecoration: 'none', fontWeight: 600 }}>
          ← Genera nuovo
        </Link>
      </div>

      {/* Filters */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1.5rem', alignItems: 'center' }}>
        <select value={filterCharacter} onChange={e => setFilterCharacter(e.target.value)} style={selectStyle}>
          <option value="">Tutti i personaggi</option>
          {characters.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={selectStyle}>
          <option value="">Tutti gli stati</option>
          {Object.entries(statusLabels).map(([val, label]) => <option key={val} value={val}>{label}</option>)}
        </select>
        <span style={{ fontSize: '0.78rem', color: 'var(--ink-muted)', marginLeft: 'auto' }}>
          {groups.length} contenut{groups.length === 1 ? 'o' : 'i'}
        </span>
      </div>

      {loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem 0' }}>
          <div style={{ width: 32, height: 32, border: '2px solid var(--border)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
        </div>
      ) : groups.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '4rem 1rem', backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}>
          <div style={{ fontSize: '2.5rem', color: 'var(--border-strong)', marginBottom: '1rem' }}>✦</div>
          <p style={{ fontFamily: "'Fraunces', serif", fontSize: '1rem', color: 'var(--ink)', margin: '0 0 0.5rem' }}>Nessun contenuto trovato</p>
          <p style={{ fontSize: '0.82rem', color: 'var(--ink-muted)', margin: 0 }}>
            {posts.length === 0 ? 'Genera il tuo primo contenuto dalla pagina Contenuti' : 'Prova a cambiare i filtri'}
          </p>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 380px), 1fr))', gap: '1rem' }}>
          {groups.map(group => {
            const activeIdx = activePlatform[group.key] || 0
            const activePost = group.posts[activeIdx] || group.posts[0]
            const sc = statusColors[activePost.status] || statusColors.draft
            const isExpanded = expandedKey === group.key
            const isEditing = editingId === activePost.id
            const hasMultiple = group.posts.length > 1

            return (
              <div key={group.key} style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)', borderTop: `3px solid ${sc.color}`, cursor: 'pointer', transition: 'border-color 0.15s' }}
                onClick={() => { if (!isEditing) setExpandedKey(isExpanded ? null : group.key) }}>
                <div style={{ padding: '1.25rem' }}>

                  {/* Character name */}
                  <p style={{ fontSize: '0.82rem', fontWeight: 700, color: 'var(--ink)', margin: '0 0 0.5rem' }}>
                    {getCharacterName(activePost.character_id)}
                  </p>

                  {/* Platform tabs */}
                  <div style={{ display: 'flex', gap: '0', marginBottom: '0.5rem', borderBottom: hasMultiple ? '2px solid var(--border)' : 'none' }}>
                    {group.posts.map((p, i) => (
                      <button key={p.id} onClick={e => { e.stopPropagation(); setActivePlatform(prev => ({ ...prev, [group.key]: i })); setEditing && setEditingId(null) }}
                        style={{
                          padding: '0.35rem 0.75rem', fontSize: '0.75rem', fontWeight: activeIdx === i ? 700 : 400,
                          fontFamily: "'DM Sans', sans-serif", border: 'none', cursor: 'pointer',
                          backgroundColor: activeIdx === i ? 'var(--surface)' : 'transparent',
                          color: activeIdx === i ? 'var(--ink)' : 'var(--ink-muted)',
                          borderBottom: hasMultiple ? (activeIdx === i ? '2px solid var(--accent)' : '2px solid transparent') : 'none',
                          marginBottom: hasMultiple ? '-2px' : 0, transition: 'all 0.15s',
                        }}>
                        {(p.platform_hint || 'post').charAt(0).toUpperCase() + (p.platform_hint || 'post').slice(1)}
                      </button>
                    ))}
                  </div>

                  {/* Status badge */}
                  <div style={{ marginBottom: '0.75rem' }}>
                    <span style={{ fontSize: '0.7rem', fontWeight: 700, padding: '0.15rem 0.5rem', backgroundColor: sc.bg, color: sc.color }}>
                      {statusLabels[activePost.status] || activePost.status}
                    </span>
                  </div>

                  {/* Text content */}
                  {isEditing ? (
                    <div onClick={e => e.stopPropagation()}>
                      <textarea value={editText} onChange={e => setEditText(e.target.value)} rows={6}
                        style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.6, fontSize: '0.85rem' }} />
                      <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
                        <button onClick={() => handleSaveEdit(activePost.id)} style={btnPrimary}>Salva</button>
                        <button onClick={() => setEditingId(null)} style={btnSecondary}>Annulla</button>
                      </div>
                    </div>
                  ) : (
                    <p style={{ fontSize: '0.85rem', color: 'var(--ink)', lineHeight: 1.6, margin: 0, whiteSpace: isExpanded ? 'pre-wrap' : 'normal', overflow: isExpanded ? 'visible' : 'hidden', display: isExpanded ? 'block' : '-webkit-box', WebkitLineClamp: isExpanded ? 'unset' : 3, WebkitBoxOrient: 'vertical' }}>
                      {activePost.text_content || '(nessun testo)'}
                    </p>
                  )}

                  {/* Hashtags when expanded */}
                  {isExpanded && !isEditing && activePost.hashtags?.length > 0 && (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem', marginTop: '0.75rem' }}>
                      {activePost.hashtags.map((tag, i) => (
                        <span key={i} style={{ fontSize: '0.72rem', padding: '0.1rem 0.4rem', backgroundColor: 'var(--accent-light)', color: 'var(--accent)' }}>
                          {tag}
                        </span>
                      ))}
                    </div>
                  )}

                  {/* Footer */}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '0.75rem', paddingTop: '0.75rem', borderTop: '1px solid var(--border)' }}>
                    <span style={{ fontSize: '0.72rem', color: 'var(--ink-muted)' }}>{formatDate(activePost.created_at)}</span>
                    {activePost.hashtags?.length > 0 && (
                      <span style={{ fontSize: '0.72rem', color: 'var(--ink-muted)' }}>{activePost.hashtags.length} hashtag</span>
                    )}
                  </div>

                  {/* Actions */}
                  <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.75rem', borderTop: '1px solid var(--border)' }}
                    onClick={e => e.stopPropagation()}>
                    {activePost.status === 'draft' && (
                      <button onClick={() => handleApprove(activePost.id)} style={{ ...btnSmall, backgroundColor: 'var(--success-light)', color: 'var(--success)' }}>Approva</button>
                    )}
                    <button onClick={() => { setEditingId(activePost.id); setEditText(activePost.text_content || ''); setExpandedKey(group.key) }}
                      style={{ ...btnSmall, backgroundColor: 'var(--cream-dark)', color: 'var(--ink-light)' }}>Modifica</button>
                    <button onClick={() => setDeleteTarget({ id: activePost.id, batchKey: group.key })}
                      style={{ ...btnSmall, color: 'var(--error)', backgroundColor: 'transparent', marginLeft: 'auto' }}>Elimina</button>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}

      <ConfirmModal
        open={deleteTarget !== null}
        title="Elimina contenuto"
        message="Sei sicuro di voler eliminare questo contenuto? L'operazione non è reversibile."
        confirmLabel="Elimina"
        cancelLabel="Annulla"
        confirmStyle="danger"
        onConfirm={handleDelete}
        onCancel={() => setDeleteTarget(null)}
      />
      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
    </div>
  )
}

const selectStyle = {
  padding: '0.5rem 0.75rem', border: '1px solid var(--border)', fontSize: '0.82rem',
  fontFamily: "'DM Sans', sans-serif", backgroundColor: 'var(--surface)', outline: 'none', cursor: 'pointer',
}
const inputStyle = {
  width: '100%', padding: '0.625rem 0.875rem', border: '1px solid var(--border)',
  fontSize: '0.875rem', color: 'var(--ink)', backgroundColor: 'var(--surface)',
  outline: 'none', boxSizing: 'border-box', fontFamily: "'DM Sans', sans-serif",
}
const btnPrimary = {
  padding: '0.4rem 0.8rem', backgroundColor: 'var(--ink)', color: 'white',
  fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: '0.8rem', border: 'none', cursor: 'pointer',
}
const btnSecondary = {
  ...btnPrimary, backgroundColor: 'var(--cream-dark)', color: 'var(--ink-light)',
}
const btnSmall = {
  padding: '0.3rem 0.6rem', fontSize: '0.75rem', fontWeight: 600, border: 'none',
  cursor: 'pointer', fontFamily: "'DM Sans', sans-serif",
}