import { useState, useEffect, useMemo } from 'react'
import { Link } from 'react-router-dom'
import { fetchServices } from '../lib/projectKindsApi'
import { servicesCards } from '../lib/servicesView'
import { ticketPath } from '../lib/ticketRoutes'
import { previewStateTone } from '../components/projectTones'
import { PageHeader, Card, Button, Badge } from '../components/ui'

export default function ServicesPage() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const load = async () => {
    setLoading(true)
    setError(null)
    try {
      setData(await fetchServices())
    } catch (err) {
      setError(err.message || 'Services konnten nicht geladen werden.')
    } finally {
      setLoading(false)
    }
  }
  useEffect(() => { load() }, [])

  const cards = useMemo(() => servicesCards(data), [data])

  if (loading) return <div className="page"><div className="loading">Wird geladen …</div></div>

  return (
    <div className="page">
      <PageHeader title="Services" subtitle="Unsere Projekte nach Art" />
      {error && (
        <div className="services-stack">
          <p className="msg err" role="alert">{error}</p>
          <div className="row-buttons">
            <Button type="button" onClick={load}>Erneut versuchen</Button>
          </div>
        </div>
      )}
      {cards.map((c) => (
        <Card key={c.key} title={`${c.label} (${c.count})`}>
          <div className="services-stack">
            {c.description && <p className="muted">{c.description}</p>}
            {c.features.length > 0 && (
              <div className="pv-row">
                {c.features.map((f) => (
                  <Badge key={f.label}>{f.label}{f.statusLabel ? ` · ${f.statusLabel}` : ''}</Badge>
                ))}
              </div>
            )}
            {c.projects.length > 0 ? (
              <div className="list">
                {c.projects.map((p) => (
                  <div key={p.id} className="list-row">
                    <div className="list-row-text">
                      <div className="cell-title">
                        {p.projectName || p.repoFullName}
                        {p.previewState && <Badge tone={previewStateTone(p.previewState)}>Preview: {p.previewState}</Badge>}
                        {p.features?.analyse === 'active' && <Badge>Analyse an</Badge>}
                      </div>
                      <div className="cell-sub">
                        {[p.customerName, p.previewUrl && 'Preview'].filter(Boolean).join(' · ') || 'Intern'}
                      </div>
                    </div>
                    {(p.woid || c.key === 'missing') && (
                      <div className="row-actions">
                        {p.woid && <Link className="link" to={ticketPath(p.woid)}>Ticket #{p.woid}</Link>}
                        {c.key === 'missing' && <Link className="link" to={`/projects/zuordnen/${p.id}`}>Zuordnen</Link>}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <p className="muted pick-empty">Noch keine Projekte.</p>
            )}
          </div>
        </Card>
      ))}
    </div>
  )
}