"use client"

import { useState } from "react"
import Link from "next/link"
import { ClipboardList, Printer, Share2 } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { InspectionShareDialog } from "@/modules/inspections/inspection-share-dialog"

/**
 * Client island for the inspection detail page header — exposes the Share
 * dialog and a quick link to the technician's checkpoints page without
 * pulling the entire page out of the server-component tree.
 */
export function InspectionDetailHeader({
    inspectionId,
    title,
}: {
    inspectionId: number | string
    title?: string
}) {
    const [shareOpen, setShareOpen] = useState(false)

    return (
        <div className="flex items-center justify-between flex-wrap gap-2 mb-3">
            <div className="min-w-0">
                <div className="text-xs text-muted-foreground uppercase tracking-wide">Inspection</div>
                <h1 className="text-xl sm:text-2xl font-bold truncate">{title ?? "Inspection"}</h1>
            </div>
            <div className="flex items-center gap-2">
                <Button variant="outline" size="sm" asChild>
                    <Link href={`/sales/inspections/${inspectionId}/checkpoints`}>
                        <ClipboardList className="size-4" /> Checkpoints
                    </Link>
                </Button>
                <Button variant="default" size="sm" onClick={() => setShareOpen(true)}>
                    <Share2 className="size-4" /> Share with customer
                </Button>
            </div>

            <InspectionShareDialog open={shareOpen} onOpenChange={setShareOpen} inspectionId={inspectionId} />
        </div>
    )
}