'use client'

import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import Link from 'next/link'
import {
  FALLBACK_HEX,
  cssVarRefForPhase,
  phaseConfigKeyForIntakePriority,
  type IntakePriorityKey,
} from '@/lib/intake/phase-config'
import { Tooltip } from '@/components/ui/tooltip'

const PRIORITY_HINT: Record<IntakePriorityKey, string> = {
  low: 'Niedrige Priorität — Backlog, kein Termin-Druck',
  normal: 'Standard-Priorität — innerhalb 4-6 Wochen einplanbar',
  high: 'Hohe Priorität — innerhalb 2-3 Wochen reagieren',
  escalation: 'Eskalation — sofortige Reaktion. Nur durch Admin setzbar.',
}

type IntakeCardData = {
  id: string
  intake_id: string
  project_lead: string | null
  intake_type: string | null
  requesting_department: string | null
  supplier_name: string | null
  priority: 'low' | 'normal' | 'high' | 'escalation'
  desired_visit_start: string | null
  desired_visit_end: string | null
  reviewing_consultant_id?: string | null
  reviewing_consultant_name?: string | null
}

function priorityChipStyle(priority: IntakePriorityKey): React.CSSProperties {
  const key = phaseConfigKeyForIntakePriority(priority)
  const fallback = FALLBACK_HEX[key] ?? 'var(--primary)'
  const color = cssVarRefForPhase(key, fallback)
  return {
    color,
    backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
    borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,
  }
}

type Props<T extends IntakeCardData = IntakeCardData> = {
  intake: T
  draggable?: boolean
  onReject?: (intake: T) => void
  onPromote?: (intake: T) => void
}

const TYPE_LABEL: Record<string, string> = {
  lieferantenbefaehigung: 'Lieferantenbef.',
  lsc_workshop:           'LSC Workshop',
  fabrikanalyse:          'Fabrikanalyse',
  invest_workshop:        'Invest WS',
  sonderprojekt:          'Sonderprojekt',
  sonstiges:              'Sonstiges',
}

const PRIORITY_LABEL: Record<IntakeCardData['priority'], string> = {
  low:        'Niedrig',
  normal:     'Normal',
  high:       'Hoch',
  escalation: 'Eskalation',
}

function formatDateRange(start: string | null, end: string | null): string | null {
  if (!start) return null
  const fmt = (s: string) => {
    const d = new Date(s)
    if (Number.isNaN(d.getTime())) return s
    return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })
  }
  if (!end || end === start) return fmt(start)
  return `${fmt(start)} – ${fmt(end)}`
}

export default function IntakeCard<T extends IntakeCardData = IntakeCardData>({
  intake,
  draggable = true,
  onReject,
  onPromote,
}: Props<T>) {
  const sortable = useSortable({ id: intake.id, disabled: !draggable })
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable

  const style = draggable
    ? {
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.4 : 1,
      }
    : undefined

  const visitRange = formatDateRange(intake.desired_visit_start, intake.desired_visit_end)
  const typeLabel = intake.intake_type ? TYPE_LABEL[intake.intake_type] ?? intake.intake_type : null

  return (
    <article
      ref={draggable ? setNodeRef : undefined}
      style={style}
      className="bg-card border border-border rounded-md p-3 shadow-sm hover:shadow-md transition-shadow"
      aria-label={`Auftrag ${intake.intake_id}`}
    >
      <div
        className={draggable ? 'cursor-grab active:cursor-grabbing' : ''}
        {...(draggable ? attributes : {})}
        {...(draggable ? listeners : {})}
      >
        <header className="flex items-start justify-between gap-2">
          <div className="font-condensed text-xs font-bold text-foreground">
            {intake.intake_id}
          </div>
          <Tooltip content={PRIORITY_HINT[intake.priority]}>
            <span
              className="text-[10px] font-condensed font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-sm border cursor-help"
              style={priorityChipStyle(intake.priority)}
            >
              {PRIORITY_LABEL[intake.priority]}
            </span>
          </Tooltip>
        </header>

        <p className="mt-2 text-sm font-medium text-foreground line-clamp-2">
          {intake.supplier_name ?? intake.project_lead ?? '—'}
        </p>

        <div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
          {typeLabel && (
            <span className="bg-primary/10 text-primary px-1.5 py-0.5 rounded-sm font-condensed">
              {typeLabel}
            </span>
          )}
          {intake.requesting_department && (
            <span className="bg-muted text-muted-foreground px-1.5 py-0.5 rounded-sm font-condensed">
              {intake.requesting_department}
            </span>
          )}
        </div>

        {visitRange && (
          <p className="mt-2 text-[11px] text-muted-foreground font-condensed">
            Wunsch: {visitRange}
          </p>
        )}

        {intake.reviewing_consultant_name && (
          <p className="mt-2 text-[11px] font-condensed">
            <span className="text-muted-foreground uppercase tracking-wide">Reviewer:</span>{' '}
            <span className="text-foreground font-medium">{intake.reviewing_consultant_name}</span>
          </p>
        )}
      </div>

      <footer className="mt-3 pt-2 border-t border-border flex items-center justify-between gap-2">
        <Link
          href={`/intake/${intake.id}`}
          className="text-[11px] font-condensed text-primary hover:underline"
        >
          Details ›
        </Link>
        <div className="flex items-center gap-3">
          {onPromote && (
            <button
              type="button"
              onClick={() => onPromote(intake)}
              className="text-[11px] font-condensed font-bold text-primary hover:underline"
            >
              Promoten →
            </button>
          )}
          {onReject && (
            <button
              type="button"
              onClick={() => onReject(intake)}
              className="text-[11px] font-condensed text-destructive hover:underline"
            >
              Ablehnen
            </button>
          )}
        </div>
      </footer>
    </article>
  )
}