import { useEffect, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Card } from './ui'
import { StatusPill } from './ui/StatusPill'
import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
import { ticketPath, ticketRef } from '../lib/ticketRoutes'
import { ticketNumber } from '../lib/ticketView'

/**
 * Kontextbox im Ticket: "Weitere Tickets von <Kunde>" (klickbar).
 * Rendert nichts, wenn dem Ticket kein Projekt zugewiesen ist.
 */
export default function ProjectContextPanel({ ticket }) {
  const { fetchByTicketId } = useWebsiteProjects()
  const location = useLocation()
  const [context, setContext] = useState(null)

  useEffect(() => {
    let cancelled = false
    async function load() {
      try {
        const assignedProjects = await fetchByTicketId(ticket.$id)
        if (!assignedProjects.length) {
          if (!cancelled) setContext(null)
          return
        }

        let otherTickets = []
        if (ticket.customerId) {
          const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [
            Query.equal('customerId', ticket.customerId),
            Query.orderDesc('$createdAt'),
            Query.limit(50),
          ])
          otherTickets = res.documents.filter((t) => t.$id !== ticket.$id)
        }
        if (!cancelled) setContext({ otherTickets })
      } catch {
        if (!cancelled) setContext(null)
      }
    }
    load()
    return () => { cancelled = true }
  }, [ticket.$id, ticket.customerId, fetchByTicketId])

  if (!context) return null
  const { otherTickets } = context

  return (
    <Card title={ticket.customerName ? `Weitere Tickets von ${ticket.customerName}` : 'Weitere Tickets'}>
      {!ticket.customerId ? (
        <p className="muted">Kein Kunde zugeordnet — andere Tickets koennen nicht automatisch verknuepft werden.</p>
      ) : !otherTickets.length ? (
        <p className="muted">Keine weiteren Tickets zu diesem Kunden/Projekt.</p>
      ) : (
        <div>
          {otherTickets.map((t) => (
            <Link key={t.$id} className="list-row" to={ticketPath(ticketRef(t))} state={location.state}>
              <span className="cell-title list-row-text">
                <span className="id">{ticketNumber(t)}</span>
                <span>{t.topic || t.title || '-'}</span>
              </span>
              <StatusPill status={t.status} />
            </Link>
          ))}
        </div>
      )}
    </Card>
  )
}