'use client'

import Link from'next/link'
import { AlertTriangle, Building2, Users, ArrowRight, Info, Tags, Calendar, TextCursorInput, HelpCircle, Eye } from'lucide-react'

interface Props {
 supplierCount: number
 supplierLastUpdated: string | null
 consultantCount: number
 consultantLastUpdated: string | null
 projektStammdatenCount: number
 projektStammdatenLastUpdated: string | null
 placeholderCount: number
 fieldHintCount: number
 fieldHintLastUpdated: string | null
 visibilityPairCount: number
}

function formatDate(iso: string | null): string {
 if (!iso) return'—'
 return new Date(iso).toLocaleDateString('de-DE', {
 day:'2-digit',
 month:'2-digit',
 year:'numeric',
 })
}

interface MasterDataCardProps {
 title: string
 icon: React.ReactNode
 count: number
 lastUpdated: string | null
 href: string
 note?: string
}

function MasterDataCard({ title, icon, count, lastUpdated, href, note }: MasterDataCardProps) {
 return (
 <div className="bg-card border border-border rounded-lg p-5 flex flex-col gap-4">
 <div className="flex items-start gap-4">
 <div className="p-3 bg-secondary rounded-lg text-primary">{icon}</div>
 <div className="flex-1 min-w-0">
 <p className="font-semibold text-foreground">{title}</p>
 <p className="text-2xl font-bold text-primary mt-1">{count.toLocaleString('de-DE')}</p>
 <p className="text-xs text-muted-foreground mt-0.5">Aktive Einträge · Zuletzt: {formatDate(lastUpdated)}</p>
 </div>
 </div>
 {note && (
 <div className="flex items-start gap-2 text-xs text-muted-foreground bg-background rounded px-3 py-2 border border-border">
 <Info size={12} className="mt-0.5 shrink-0 text-primary"/>
 {note}
 </div>
 )}
 <Link
 href={href}
 className="inline-flex items-center justify-center gap-2 text-sm font-medium px-4 py-2 rounded bg-primary text-white hover:bg-primary-dark transition-colors"
 >
 Bearbeiten
 <ArrowRight size={14} />
 </Link>
 </div>
 )
}

export default function MasterDataHomeClient({
 supplierCount,
 supplierLastUpdated,
 consultantCount,
 consultantLastUpdated,
 projektStammdatenCount,
 projektStammdatenLastUpdated,
 placeholderCount,
 fieldHintCount,
 fieldHintLastUpdated,
 visibilityPairCount,
}: Props) {
 return (
 <div className="max-w-5xl mx-auto space-y-5">
 {/* Warning banner */}
 <div className="flex items-start gap-3 bg-amber-50 border border-amber-200 rounded-lg px-4 py-3">
 <AlertTriangle size={18} className="text-amber-600 mt-0.5 shrink-0"/>
 <p className="text-sm text-amber-800">
 <strong>Dieser Bereich ist nur für Administratoren.</strong> Änderungen an Stammdaten wirken sich auf die gesamte Anwendung aus.
 </p>
 </div>

 {/* Header */}
 <div>
 <h1 className="text-xl font-bold text-foreground">Stammdaten</h1>
 <p className="text-sm text-muted-foreground mt-0.5">Verwaltung von Lieferanten, Beratern und Projekt-Stammdaten</p>
 </div>

 {/* Cards */}
 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 <MasterDataCard
 title="Lieferanten"
 icon={<Building2 size={22} />}
 count={supplierCount}
 lastUpdated={supplierLastUpdated}
 href="/repository/masterdata/suppliers"
 />
 <MasterDataCard
 title="Berater"
 icon={<Users size={22} />}
 count={consultantCount}
 lastUpdated={consultantLastUpdated}
 href="/repository/masterdata/consultants"
 note="Synchronisiert mit Einsatzplanung"
 />
 <MasterDataCard
 title="Projekt-Stammdaten"
 icon={<Tags size={22} />}
 count={projektStammdatenCount}
 lastUpdated={projektStammdatenLastUpdated}
 href="/repository/masterdata/stammdaten"
 note="KIFAG, QMT, Einkauf, Cost Engineering, KPI Boards u.v.m."
 />
 <MasterDataCard
 title="Beispieltexte"
 icon={<TextCursorInput size={22} />}
 count={placeholderCount}
 lastUpdated={null}
 href="/repository/masterdata/stammdaten/PLACEHOLDER_TEXTS"
 note="Placeholder-Texte für Eingabefelder. Werden in der gesamten App als Beispiele angezeigt."
 />
 <MasterDataCard
 title="Feld-Hinweise"
 icon={<HelpCircle size={22} />}
 count={fieldHintCount}
 lastUpdated={fieldHintLastUpdated}
 href="/repository/masterdata/feld-hinweise"
 note="Erklärungen und Berechnungsformeln, die als Tooltip neben den Feldern in der App erscheinen."
 />
 <MasterDataCard
 title="Abteilungs-Sichtbarkeit"
 icon={<Eye size={22} />}
 count={visibilityPairCount}
 lastUpdated={null}
 href="/repository/masterdata/abteilungs-sichtbarkeit"
 note="Welche Abteilung die Projekte welcher anderen sehen darf (z. B. MO-23 ↔ MO-24). Plus per-Projekt-Sichtrechte im Projekt-Detail."
 />
 {/* tdd-guard:skip — presentational master-data cards */}
 <MasterDataCard
 title="Agenda-Vorlagen"
 icon={<Calendar size={22} />}
 count={4}
 lastUpdated={null}
 href="/repository/masterdata/agenda-vorlagen"
 note="Standard-Agenden je Workshop-Typ als Basis für „Vorschlag erzeugen“."
 />
 <div className="bg-card border border-border rounded-lg p-5 flex flex-col gap-4">
 <div className="flex items-start gap-4">
 <div className="p-3 bg-secondary rounded-lg text-primary"><Calendar size={22} /></div>
 <div className="flex-1 min-w-0">
 <p className="font-semibold text-foreground">Feiertage</p>
 <p className="text-xs text-muted-foreground mt-1">Bayerische Feiertage werden automatisch geladen. Eigene Feiertage können in den Kalender-Einstellungen verwaltet werden.</p>
 </div>
 </div>
 <Link
 href="/kalender/settings"
 className="inline-flex items-center justify-center gap-2 text-sm font-medium px-4 py-2 rounded bg-primary text-white hover:bg-primary-dark transition-colors"
 >
 Kalender-Einstellungen
 <ArrowRight size={14} />
 </Link>
 </div>
 </div>
 </div>
 )
}