import { useEffect, useMemo, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { FaTimes } from 'react-icons/fa'
import { IconRoute, IconPlus, IconTrash, IconTicket } from '@tabler/icons-react'
import { PageHeader, Card, Button, Badge, EmptyState, Field } from '../components/ui'
import { useAuth } from '../context/AuthContext'
import { useRoadmaps } from '../hooks/useRoadmaps'
import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
import { fetchRoadmapNodes, computeProgress, ROADMAP_STATUS } from '../lib/roadmaps'
import RoadmapProgress from '../components/roadmap/RoadmapProgressBar'

export default function RoadmapsPage() {
  const { user } = useAuth()
  const navigate = useNavigate()
  const { roadmaps, loading, fetchAll, createRoadmap, deleteRoadmap } = useRoadmaps()
  const { fetchAllProjects } = useWebsiteProjects()

  const [projects, setProjects] = useState([])
  const [progressById, setProgressById] = useState({})
  const [showCreate, setShowCreate] = useState(false)
  const [form, setForm] = useState({ projectId: '', title: '', goalTitle: '' })
  const [creating, setCreating] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    let cancelled = false
    async function load() {
      const [allProjects, allRoadmaps] = await Promise.all([fetchAllProjects(), fetchAll()])
      if (cancelled) return
      setProjects(allProjects.filter((p) => !p.isTemplate && !p.archived))
      const active = allRoadmaps.filter((r) => r.status === ROADMAP_STATUS.ACTIVE)
      const entries = await Promise.all(active.map(async (r) => {
        try {
          return [r.$id, computeProgress(await fetchRoadmapNodes(r.$id))]
        } catch {
          return [r.$id, null]
        }
      }))
      if (!cancelled) setProgressById(Object.fromEntries(entries.filter(([, p]) => p)))
    }
    load()
    return () => { cancelled = true }
  }, [fetchAll, fetchAllProjects])

  const activeRoadmaps = roadmaps.filter((r) => r.status === ROADMAP_STATUS.ACTIVE)
  const completedRoadmaps = roadmaps.filter((r) => r.status === ROADMAP_STATUS.COMPLETED)

  // Nur Projekte ohne aktiven Plan anbieten (genau 1 aktiver Plan pro Projekt)
  const availableProjects = useMemo(() => {
    const withActivePlan = new Set(activeRoadmaps.map((r) => r.projectId))
    return projects.filter((p) => !withActivePlan.has(p.$id))
  }, [projects, activeRoadmaps])

  const openCreate = () => {
    setForm({ projectId: availableProjects[0]?.$id || '', title: '', goalTitle: '' })
    setError('')
    setShowCreate(true)
  }

  const handleCreate = async (e) => {
    e.preventDefault()
    const project = projects.find((p) => p.$id === form.projectId)
    if (!project) {
      setError('Bitte ein Projekt auswaehlen.')
      return
    }
    setCreating(true)
    setError('')
    const result = await createRoadmap(project, { title: form.title.trim(), goalTitle: form.goalTitle.trim() }, user)
    setCreating(false)
    if (!result.success) {
      setError(result.error)
      return
    }
    setShowCreate(false)
    navigate(`/roadmaps/${result.data.roadmap.$id}`)
  }

  const handleDelete = async (roadmap) => {
    const ok = window.confirm(
      `Plan "${roadmap.title}" wirklich loeschen?\n\n` +
      `Alle Knoten werden entfernt und das Projektticket (WOID ${roadmap.woid || '-'}) wird abgebrochen.`
    )
    if (!ok) return
    const result = await deleteRoadmap(roadmap, user)
    if (!result.success) window.alert(`Loeschen fehlgeschlagen: ${result.error}`)
  }

  const renderRoadmapCard = (roadmap) => {
    const progress = progressById[roadmap.$id]
    return (
      <Card key={roadmap.$id}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ minWidth: 0 }}>
            <Link to={`/roadmaps/${roadmap.$id}`} style={{ fontWeight: 700, fontSize: 15 }}>
              {roadmap.title}
            </Link>
            <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>
              Projekt: {roadmap.projectName || '-'}
              {roadmap.customerName ? ` · Kunde: ${roadmap.customerName}` : ''}
            </div>
            {roadmap.woid && (
              <div className="faint" style={{ fontSize: 12, marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
                <IconTicket size={14} />
                <Link to={`/tickets?woid=${roadmap.woid}`}>Projektticket WOID {roadmap.woid}</Link>
              </div>
            )}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {roadmap.status === ROADMAP_STATUS.COMPLETED
              ? <Badge tone="ok">Abgeschlossen</Badge>
              : progress && <RoadmapProgress progress={progress} />}
            <div style={{ display: 'flex', gap: 6 }}>
              <Button variant="ghost" onClick={() => navigate(`/roadmaps/${roadmap.$id}`)}>Oeffnen</Button>
              {roadmap.status === ROADMAP_STATUS.ACTIVE && (
                <Button variant="ghost" title="Plan loeschen" onClick={() => handleDelete(roadmap)}>
                  <IconTrash size={16} />
                </Button>
              )}
            </div>
          </div>
        </div>
      </Card>
    )
  }

  return (
    <div className="page">
      <PageHeader
        title="Roadmaps"
        subtitle="Projektspezifische Plaene — jeder Plan trackt sich automatisch in einem Projektticket"
        actions={
          <Button variant="primary" onClick={openCreate} disabled={!availableProjects.length && !loading}>
            <IconPlus size={16} /> Plan erstellen
          </Button>
        }
      />

      {loading && !roadmaps.length ? (
        <p className="muted">Lade Roadmaps…</p>
      ) : (
        <>
          {!activeRoadmaps.length ? (
            <EmptyState
              icon={<IconRoute size={40} />}
              title="Noch keine aktiven Plaene"
              hint="Erstelle zu einem Projekt einen Plan — das zugehoerige Projektticket wird automatisch angelegt."
              action={availableProjects.length
                ? <Button variant="primary" onClick={openCreate}><IconPlus size={16} /> Plan erstellen</Button>
                : null}
            />
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {activeRoadmaps.map(renderRoadmapCard)}
            </div>
          )}

          {completedRoadmaps.length > 0 && (
            <>
              <h3 style={{ margin: '28px 0 12px' }}>Archiv</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {completedRoadmaps.map(renderRoadmapCard)}
              </div>
            </>
          )}
        </>
      )}

      {showCreate && (
        <div className="overlay">
          <span className="overlay-close" onClick={() => setShowCreate(false)}><FaTimes /></span>
          <div className="overlay-content" style={{ maxWidth: 480 }}>
            <h2 style={{ marginTop: 0 }}>Neuen Plan erstellen</h2>
            <p className="muted" style={{ fontSize: 13 }}>
              Zum Plan wird automatisch ein Projektticket erstellt, in dem der Fortschritt getrackt wird.
            </p>
            <form onSubmit={handleCreate} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Field label="Projekt *">
                <select
                  value={form.projectId}
                  onChange={(e) => setForm((f) => ({ ...f, projectId: e.target.value }))}
                  required
                >
                  <option value="" disabled>Projekt auswaehlen…</option>
                  {availableProjects.map((p) => (
                    <option key={p.$id} value={p.$id}>{p.projectName}</option>
                  ))}
                </select>
              </Field>
              <Field label="Titel des Plans" hint="Leer lassen fuer 'Plan: <Projektname>'">
                <input
                  type="text"
                  value={form.title}
                  maxLength={128}
                  placeholder="z.B. Website-Relaunch"
                  onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
                />
              </Field>
              <Field label="Erstes Ziel" hint="Der Zielknoten ganz rechts — weitere Ziele kannst du im Board hinzufuegen">
                <input
                  type="text"
                  value={form.goalTitle}
                  maxLength={128}
                  placeholder="z.B. Website live"
                  onChange={(e) => setForm((f) => ({ ...f, goalTitle: e.target.value }))}
                />
              </Field>
              {error && <p style={{ color: 'var(--danger, #ef4444)', fontSize: 13 }}>{error}</p>}
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
                <Button type="button" variant="ghost" onClick={() => setShowCreate(false)}>Abbrechen</Button>
                <Button type="submit" variant="primary" disabled={creating}>
                  {creating ? 'Erstelle…' : 'Plan + Ticket erstellen'}
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}