'use client'

import { useState } from 'react'
import { ChevronDown, ChevronRight, ExternalLink } from 'lucide-react'
import type { EvidenceUnit } from '@/lib/sdk/advisor/contract'
import { resolveRegulation } from '@/lib/sdk/advisor/regulation-display'

/** One evidence unit (contract shape). Compact inside a document group: chapter/section only. */
export function EvidenceUnitCard({
  unit,
  compact,
  highlighted,
}: {
  unit: EvidenceUnit
  compact?: boolean
  highlighted?: boolean
}) {
  const [open, setOpen] = useState(false)
  const d = resolveRegulation({ code: unit.document, short: unit.document })
  const crumbs = [unit.section, unit.paragraph].filter((x): x is string => Boolean(x))
  const canOpen = !!unit.url && /^https?:\/\//i.test(unit.url)

  const header = compact ? (d.chapter ? `Kapitel ${d.chapter}` : crumbs[0] || d.familyLabel) : d.familyLabel
  const sub = compact && !d.chapter && crumbs.length ? crumbs.slice(1) : crumbs

  return (
    <div
      id={`ev-${unit.evidence_id}`}
      className={`${
        compact
          ? 'rounded-md border border-gray-100 bg-gray-50 p-2'
          : 'rounded-lg border border-gray-200 bg-white p-2.5'
      } ${highlighted ? 'ring-2 ring-indigo-400' : ''}`}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <div className="truncate text-xs font-semibold text-gray-900">{header}</div>
          {sub.length > 0 && (
            <div className="mt-0.5 flex flex-wrap items-center gap-x-1 text-[11px] text-gray-500">
              {sub.map((c, i) => (
                <span key={i} className="flex items-center gap-1">
                  {i > 0 && <span className="text-gray-300">›</span>}
                  {c}
                </span>
              ))}
            </div>
          )}
        </div>
        {canOpen && (
          <a
            href={unit.url}
            target="_blank"
            rel="noopener noreferrer"
            className="flex flex-shrink-0 items-center gap-0.5 rounded px-1.5 py-0.5 text-[11px] font-medium text-indigo-600 hover:bg-indigo-50"
          >
            <ExternalLink className="h-3 w-3" />
            öffnen
          </a>
        )}
      </div>
      {unit.snippet && (
        <div className="mt-1.5">
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            className="flex items-center gap-0.5 text-[11px] text-gray-400 hover:text-gray-600"
          >
            {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
            Textauszug
          </button>
          {open && (
            <p className="mt-1 border-l-2 border-gray-200 pl-2 text-[11px] italic text-gray-500">
              {unit.snippet}
            </p>
          )}
        </div>
      )}
    </div>
  )
}