Vector/apps/web/src/pages/PartDetail.tsx

import { useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { AlertTriangle, ArrowLeft, Edit, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Separator,
  Skeleton,
} from '@vector/ui';
import { getPart, deletePart } from '../lib/api/parts.js';
import { ApiRequestError } from '../lib/api/client.js';
import { queryKeys } from '../lib/queryKeys.js';
import { useAuth } from '../contexts/AuthContext.js';
import { PartStateBadge } from '../components/parts/PartStateBadge.js';
import { PartEventTimeline } from '../components/parts/PartEventTimeline.js';
import { PartFormDialog } from '../components/parts/PartFormDialog.js';
import { TagPicker } from '../components/tags/TagPicker.js';
import { ConfirmDialog } from '../components/ConfirmDialog.js';

function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[10rem_1fr] gap-2 text-sm">
      <dt className="text-muted-foreground">{label}</dt>
      <dd className="text-foreground">{value}</dd>
    </div>
  );
}

export default function PartDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { user } = useAuth();
  const isAdmin = user?.role === 'ADMIN';

  const [editOpen, setEditOpen] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);

  const { data: part, isPending, isError, error } = useQuery({
    queryKey: queryKeys.parts.detail(id!),
    queryFn: () => getPart(id!),
    enabled: Boolean(id),
  });

  const deleteMutation = useMutation({
    mutationFn: () => deletePart(id!),
    onSuccess: () => {
      toast.success('Part deleted');
      queryClient.invalidateQueries({ queryKey: queryKeys.parts.all });
      navigate('/parts', { replace: true });
    },
    onError: (err) => {
      toast.error(err instanceof ApiRequestError ? err.body.message : 'Delete failed');
    },
  });

  if (isPending) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-48 w-full" />
      </div>
    );
  }

  if (isError || !part) {
    const msg = error instanceof ApiRequestError ? error.body.message : 'Part not found.';
    return (
      <Card>
        <CardHeader>
          <CardTitle>Part unavailable</CardTitle>
          <CardDescription>{msg}</CardDescription>
        </CardHeader>
        <CardContent>
          <Button variant="outline" onClick={() => navigate('/parts')}>
            <ArrowLeft className="h-4 w-4" />
            Back to parts
          </Button>
        </CardContent>
      </Card>
    );
  }

  const eolDate = part.partModel.eolDate ? new Date(part.partModel.eolDate) : null;
  const pastEol = eolDate ? eolDate.getTime() < Date.now() : false;

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={() => navigate('/parts')} aria-label="Back">
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="font-mono text-lg font-semibold tracking-tight">{part.serialNumber}</h1>
            <p className="text-xs text-muted-foreground">
              {part.manufacturer.name} · {part.partModel.mpn}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <PartStateBadge state={part.state} />
          <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
            <Edit className="h-3.5 w-3.5" />
            Edit
          </Button>
          {isAdmin && (
            <Button
              variant="outline"
              size="sm"
              className="text-destructive hover:text-destructive"
              onClick={() => setConfirmDelete(true)}
            >
              <Trash2 className="h-3.5 w-3.5" />
              Delete
            </Button>
          )}
        </div>
      </div>

      {pastEol && eolDate && (
        <Card className="border-warning/60 bg-warning/10">
          <CardContent className="flex items-start gap-3 py-3">
            <AlertTriangle className="mt-0.5 h-4 w-4 text-warning" />
            <div className="text-sm">
              <span className="font-medium text-foreground">
                {part.partModel.mpn} reached EOL {eolDate.toLocaleDateString()}.
              </span>{' '}
              <span className="text-muted-foreground">
                Plan a replacement for this part.
              </span>
            </div>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-4 md:grid-cols-[1fr_1.2fr]">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Summary</CardTitle>
          </CardHeader>
          <CardContent>
            <dl className="space-y-2">
              <DetailRow label="Serial" value={<span className="font-mono text-xs">{part.serialNumber}</span>} />
              <DetailRow label="MPN" value={part.partModel.mpn} />
              <DetailRow
                label="Manufacturer"
                value={
                  <Link
                    to={`/manufacturers/${part.manufacturerId}`}
                    className="text-foreground hover:underline"
                  >
                    {part.manufacturer.name}
                  </Link>
                }
              />
              <DetailRow label="State" value={<PartStateBadge state={part.state} />} />
              <DetailRow
                label="Location"
                value={
                  part.host ? (
                    <span className="font-mono text-xs">
                      {part.host.assetId} / {part.host.name}
                    </span>
                  ) : part.custodian ? (
                    <span className="text-xs">Custody: {part.custodian.username}</span>
                  ) : part.bin?.fullPath ? (
                    <span className="font-mono text-xs">{part.bin.fullPath}</span>
                  ) : (
                    <span className="text-muted-foreground italic">Unassigned</span>
                  )
                }
              />
              <DetailRow
                label="Price"
                value={
                  part.price != null ? (
                    <span className="tabular-nums">${part.price.toFixed(2)}</span>
                  ) : (
                    <span className="text-muted-foreground">—</span>
                  )
                }
              />
              <DetailRow
                label="EOL"
                value={
                  eolDate ? (
                    <span className={pastEol ? 'text-warning' : ''}>
                      {eolDate.toLocaleDateString()}
                    </span>
                  ) : (
                    <span className="text-muted-foreground">—</span>
                  )
                }
              />
              <Separator className="my-2" />
              <DetailRow
                label="Created"
                value={new Date(part.createdAt).toLocaleString()}
              />
              <DetailRow
                label="Updated"
                value={new Date(part.updatedAt).toLocaleString()}
              />
            </dl>
            {part.notes && (
              <>
                <Separator className="my-3" />
                <div>
                  <p className="mb-1 text-xs font-medium text-muted-foreground">Notes</p>
                  <p className="whitespace-pre-wrap text-sm text-foreground">{part.notes}</p>
                </div>
              </>
            )}
            <Separator className="my-3" />
            <div>
              <p className="mb-2 text-xs font-medium text-muted-foreground">Tags</p>
              <TagPicker partId={part.id} />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">History</CardTitle>
            <CardDescription>Every field change is logged here.</CardDescription>
          </CardHeader>
          <CardContent>
            <PartEventTimeline partId={part.id} />
          </CardContent>
        </Card>
      </div>

      <PartFormDialog open={editOpen} onOpenChange={setEditOpen} part={part} />
      <ConfirmDialog
        open={confirmDelete}
        onOpenChange={setConfirmDelete}
        title="Delete part?"
        description={`Permanently remove part ${part.serialNumber}. Its history will be removed too.`}
        confirmLabel="Delete"
        destructive
        pending={deleteMutation.isPending}
        onConfirm={() => deleteMutation.mutate()}
      />
    </div>
  );
}