import {
    FileText,
    Calendar,
    Hash,
    Users,
    Building2,
    Clock,
} from "lucide-react"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator"

type CreditNoteData = {
    id?: number
    subject?: string
    credit_invoice?: string
    date?: string
    status?: string
    notes?: string
    customer_id?: number
    customer_name?: string
    department_name?: string
    department_id?: number
    invoice_id?: number
    created_at?: string
    updated_at?: string
}

type CreditNoteGeneralInfoProps = {
    creditNote: CreditNoteData
}

function InfoItem({
    icon: Icon,
    label,
    value,
}: {
    icon: React.ComponentType<{ className?: string }>
    label: string
    value?: string | null
}) {
    return (
        <div className="flex items-start gap-3">
            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                <Icon className="size-4" />
            </div>
            <div className="flex flex-col gap-0.5">
                <span className="text-xs text-muted-foreground">{label}</span>
                <span className="text-sm font-medium">
                    {value || <span className="text-muted-foreground">—</span>}
                </span>
            </div>
        </div>
    )
}

const statusColorMap: Record<string, string> = {
    draft: "secondary",
    open: "default",
    applied: "default",
    void: "outline",
}

export function CreditNoteGeneralInfo({ creditNote }: CreditNoteGeneralInfoProps) {
    return (
        <div className="grid gap-6 md:grid-cols-2">
            {/* Credit Note Details */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <FileText className="size-4" />
                        Credit Note Details
                    </CardTitle>
                </CardHeader>
                <CardContent className="grid gap-4">
                    <div className="flex flex-wrap items-center gap-2">
                        {creditNote.subject && (
                            <Badge variant="secondary">{creditNote.subject}</Badge>
                        )}
                        {creditNote.status && (
                            <Badge variant={statusColorMap[creditNote.status] as any ?? "outline"}>
                                {creditNote.status.charAt(0).toUpperCase() + creditNote.status.slice(1)}
                            </Badge>
                        )}
                    </div>
                    <Separator />
                    <div className="grid gap-4 sm:grid-cols-2">
                        <InfoItem
                            icon={Hash}
                            label="Credit Note #"
                            value={creditNote.credit_invoice}
                        />
                        <InfoItem
                            icon={Calendar}
                            label="Date"
                            value={creditNote.date}
                        />
                        <InfoItem
                            icon={Clock}
                            label="Created"
                            value={creditNote.created_at ? new Date(creditNote.created_at).toLocaleDateString() : null}
                        />
                    </div>
                </CardContent>
            </Card>

            {/* Relations */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Users className="size-4" />
                        Related Info
                    </CardTitle>
                </CardHeader>
                <CardContent className="grid gap-4">
                    <div className="grid gap-4">
                        <InfoItem
                            icon={Users}
                            label="Customer"
                            value={creditNote.customer_name}
                        />
                        <InfoItem
                            icon={Building2}
                            label="Department"
                            value={creditNote.department_name}
                        />
                    </div>
                    {creditNote.notes && (
                        <>
                            <Separator />
                            <div className="flex flex-col gap-1">
                                <span className="text-xs text-muted-foreground">Notes</span>
                                <p className="text-sm">{creditNote.notes}</p>
                            </div>
                        </>
                    )}
                </CardContent>
            </Card>
        </div>
    )
}