import { useState, useEffect, useCallback } from 'react'
import { useParams, Link } from 'react-router-dom'
import { FaSpinner, FaStar, FaArrowLeft, FaFloppyDisk } from 'react-icons/fa6'
import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
import { PageHeader, Card, Button, Badge, Tabs, EmptyState, Field } from '../components/ui'
import { StatusPill, PriorityPill } from '../components/ui/StatusPill'
import InvoicePanel from '../components/InvoicePanel'
import DocumentsPanel from '../components/DocumentsPanel'
import AssignedProjectCard from '../components/AssignedProjectCard'
import { useWebsiteProjects } from '../hooks/useWebsiteProjects'

const TABS = [
  { id: 'overview', label: 'Uebersicht' },
  { id: 'tickets', label: 'Tickets' },
  { id: 'invoices', label: 'Rechnungen' },
  { id: 'documents', label: 'Dokumente' },
  { id: 'projects', label: 'Projekte' },
]

export default function CustomerDetailPage() {
  const { id } = useParams()
  const [customer, setCustomer] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [tab, setTab] = useState('overview')

  const load = useCallback(async () => {
    setLoading(true)
    try {
      setCustomer(await databases.getDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, id))
      setError(null)
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }, [id])

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

  if (loading) return <div className="page"><div className="empty"><FaSpinner className="spinner" /></div></div>
  if (error || !customer) return <div className="page"><EmptyState title="Kunde nicht gefunden" hint={error} action={<Button as={Link} to="/customers"><FaArrowLeft /> Zurueck</Button>} /></div>

  const syntheticTicket = { customerId: customer.$id, customerName: customer.name, woid: '' }

  return (
    <div className="page">
      <PageHeader
        title={
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            {customer.importantCustomer && <FaStar style={{ color: 'var(--warn)' }} />}
            {customer.name}
          </span>
        }
        subtitle={[customer.location, customer.email, customer.phone].filter(Boolean).join(' · ')}
        actions={<Button variant="ghost" as={Link} to="/customers"><FaArrowLeft /> Alle Kunden</Button>}
      />

      <Tabs tabs={TABS} active={tab} onChange={setTab} />

      {tab === 'overview' && <OverviewTab customer={customer} onSaved={load} />}
      {tab === 'tickets' && <CustomerTickets customerId={customer.$id} />}
      {tab === 'invoices' && <InvoicePanel ticket={syntheticTicket} />}
      {tab === 'documents' && <DocumentsPanel ticket={syntheticTicket} initialScope="customer" />}
      {tab === 'projects' && <CustomerProjects customerId={customer.$id} />}
    </div>
  )
}

function OverviewTab({ customer, onSaved }) {
  const [form, setForm] = useState({
    name: customer.name || '',
    code: customer.code || '',
    location: customer.location || '',
    email: customer.email || '',
    phone: customer.phone || '',
    notes: customer.notes || '',
    importantCustomer: !!customer.importantCustomer,
    paperlessCorrespondent: customer.paperlessCorrespondent || '',
  })
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState(null)

  const save = async () => {
    setBusy(true); setMsg(null)
    try {
      await databases.updateDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, customer.$id, form)
      setMsg('Gespeichert')
      onSaved()
    } catch (err) {
      setMsg('Fehler: ' + err.message)
    } finally { setBusy(false) }
  }

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
      <Card title="Stammdaten">
        <div className="flex gap-3 wrap">
          <Field label="Name"><input className="form-control" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></Field>
          <Field label="Code"><input className="form-control" value={form.code} onChange={(e) => setForm({ ...form, code: e.target.value })} /></Field>
        </div>
        <Field label="Ort"><input className="form-control" value={form.location} onChange={(e) => setForm({ ...form, location: e.target.value })} /></Field>
        <div className="flex gap-3 wrap">
          <Field label="E-Mail"><input className="form-control" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></Field>
          <Field label="Telefon"><input className="form-control" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></Field>
        </div>
        <Field label="Notizen"><textarea className="form-control" rows={3} value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} /></Field>
        <label className="flex items-center gap-2" style={{ marginBottom: 12, cursor: 'pointer' }}>
          <input type="checkbox" checked={form.importantCustomer} onChange={(e) => setForm({ ...form, importantCustomer: e.target.checked })} />
          Wichtiger Kunde
        </label>
        <div className="flex gap-2 items-center">
          <Button variant="primary" onClick={save} disabled={busy}>{busy ? <FaSpinner className="spinner" /> : <><FaFloppyDisk /> Speichern</>}</Button>
          {msg && <span className="muted">{msg}</span>}
        </div>
      </Card>

      <Card title="Verknuepfungen">
        <div className="flex flex-col gap-3">
          <div className="flex items-center justify-between">
            <span className="muted">InvoiceNinja</span>
            {customer.invoiceNinjaClientId
              ? <Badge tone="ok" dot>verknuepft</Badge>
              : <Badge tone="muted">nicht verknuepft</Badge>}
          </div>
          <div className="faint" style={{ fontSize: 12 }}>
            Verknuepfung erfolgt im Tab &quot;Rechnungen&quot; (Kunde suchen oder neu anlegen).
          </div>
          <Field label="Paperless-Korrespondent">
            <input className="form-control" value={form.paperlessCorrespondent} onChange={(e) => setForm({ ...form, paperlessCorrespondent: e.target.value })} placeholder={customer.name} />
          </Field>
          <div className="faint" style={{ fontSize: 12 }}>Leer = Kundenname wird als Korrespondent verwendet.</div>
        </div>
      </Card>
    </div>
  )
}

function CustomerTickets({ customerId }) {
  const [tickets, setTickets] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let active = true
    ;(async () => {
      setLoading(true)
      try {
        const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [
          Query.equal('customerId', customerId),
          Query.orderDesc('$createdAt'),
          Query.limit(100),
        ])
        if (active) setTickets(res.documents)
      } catch {
        if (active) setTickets([])
      } finally {
        if (active) setLoading(false)
      }
    })()
    return () => { active = false }
  }, [customerId])

  if (loading) return <Card><FaSpinner className="spinner" /></Card>
  if (tickets.length === 0) return <Card><EmptyState title="Keine Tickets" hint="Fuer diesen Kunden gibt es noch keine Tickets." /></Card>

  return (
    <Card pad={false}>
      <div className="list">
        {tickets.map((t) => (
          <div key={t.$id} className="list-row">
            <span className="mono" style={{ color: 'var(--accent)', minWidth: 60 }}>{t.woid || t.$id.slice(-5)}</span>
            <div className="grow">
              <div style={{ fontWeight: 600 }}>{t.topic || t.title || '-'}</div>
              <div className="muted">{t.type} · {t.systemType || 'n/a'}</div>
            </div>
            <PriorityPill priority={t.priority} />
            <StatusPill status={t.status} />
          </div>
        ))}
      </div>
    </Card>
  )
}

function CustomerProjects({ customerId }) {
  const { fetchAllProjects } = useWebsiteProjects()
  const [projects, setProjects] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let active = true
    ;(async () => {
      setLoading(true)
      const all = await fetchAllProjects()
      if (active) setProjects((all || []).filter((p) => p.customerId === customerId))
      if (active) setLoading(false)
    })()
    return () => { active = false }
  }, [customerId, fetchAllProjects])

  if (loading) return <Card><FaSpinner className="spinner" /></Card>
  if (projects.length === 0) return <Card><EmptyState title="Keine Projekte" hint="Diesem Kunden sind keine Projekte/Previews zugeordnet." /></Card>

  return (
    <Card title={`Projekte (${projects.length})`}>
      {projects.map((p) => <AssignedProjectCard key={p.$id} project={p} />)}
    </Card>
  )
}
