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

import { useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft, Edit, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Separator,
  Skeleton,
} from '@vector/ui';
import { deleteHost, getHost, listHostDeployedParts } from '../lib/api/hosts.js';
import { ApiRequestError } from '../lib/api/client.js';
import { queryKeys } from '../lib/queryKeys.js';
import { useAuth } from '../contexts/AuthContext.js';
import { HostStateBadge, HostStackBadge } from '../components/hosts/HostStateBadge.js';
import { HostTimeline } from '../components/hosts/HostTimeline.js';
import { HostFormDialog } from '../components/hosts/HostFormDialog.js';
import { PartStateBadge } from '../components/parts/PartStateBadge.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 HostDetail() {
  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: host, isPending, isError, error } = useQuery({
    queryKey: queryKeys.hosts.detail(id!),
    queryFn: () => getHost(id!),
    enabled: Boolean(id),
  });

  const deployedPartsQuery = useQuery({
    queryKey: queryKeys.hosts.deployedParts(id!),
    queryFn: () => listHostDeployedParts(id!),
    enabled: Boolean(id),
  });

  const deleteMutation = useMutation({
    mutationFn: () => deleteHost(id!),
    onSuccess: () => {
      toast.success('Host deleted');
      queryClient.invalidateQueries({ queryKey: queryKeys.hosts.all });
      navigate('/hosts', { 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 || !host) {
    const msg = error instanceof ApiRequestError ? error.body.message : 'Host not found.';
    return (
      <Card>
        <CardHeader>
          <CardTitle>Host unavailable</CardTitle>
          <CardDescription>{msg}</CardDescription>
        </CardHeader>
        <CardContent>
          <Button variant="outline" onClick={() => navigate('/hosts')}>
            <ArrowLeft className="h-4 w-4" />
            Back to hosts
          </Button>
        </CardContent>
      </Card>
    );
  }

  const deployedParts = deployedPartsQuery.data ?? [];

  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('/hosts')} aria-label="Back">
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-lg font-semibold tracking-tight">{host.name}</h1>
            <p className="text-xs text-muted-foreground">
              <span className="font-mono">{host.assetId}</span>
              {host.location ? ` · ${host.location}` : ''}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <HostStateBadge state={host.state} />
          <HostStackBadge stack={host.stack} />
          <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>

      <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="Asset ID"
                value={<span className="font-mono text-xs">{host.assetId}</span>}
              />
              <DetailRow label="Name" value={host.name} />
              <DetailRow label="State" value={host.state} />
              <DetailRow label="Stack" value={host.stack} />
              <DetailRow
                label="Location"
                value={
                  host.location ?? <span className="text-muted-foreground italic">—</span>
                }
              />
              <Separator className="my-2" />
              <DetailRow label="Created" value={new Date(host.createdAt).toLocaleString()} />
              <DetailRow label="Updated" value={new Date(host.updatedAt).toLocaleString()} />
            </dl>
            {host.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">{host.notes}</p>
                </div>
              </>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">History</CardTitle>
            <CardDescription>
              FMs, repairs, part swaps, and host field changes.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <HostTimeline hostId={host.id} />
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Deployed parts</CardTitle>
          <CardDescription>Parts currently installed on this host.</CardDescription>
        </CardHeader>
        <CardContent>
          {deployedPartsQuery.isPending ? (
            <Skeleton className="h-16 w-full" />
          ) : deployedParts.length === 0 ? (
            <p className="text-sm text-muted-foreground">No parts deployed here.</p>
          ) : (
            <div className="overflow-hidden rounded-md border">
              <table className="w-full text-sm">
                <thead className="bg-muted/40 text-xs text-muted-foreground">
                  <tr>
                    <th className="px-3 py-2 text-left font-medium">Serial</th>
                    <th className="px-3 py-2 text-left font-medium">MPN</th>
                    <th className="px-3 py-2 text-left font-medium">Manufacturer</th>
                    <th className="px-3 py-2 text-left font-medium">State</th>
                  </tr>
                </thead>
                <tbody>
                  {deployedParts.map((p) => (
                    <tr key={p.id} className="border-t">
                      <td className="px-3 py-2">
                        <Link
                          to={`/parts/${p.id}`}
                          className="font-mono text-xs hover:underline"
                        >
                          {p.serialNumber}
                        </Link>
                      </td>
                      <td className="px-3 py-2 font-mono text-xs">{p.partModel.mpn}</td>
                      <td className="px-3 py-2 text-muted-foreground">
                        {p.manufacturer.name}
                      </td>
                      <td className="px-3 py-2">
                        <PartStateBadge state={p.state} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>

      <HostFormDialog open={editOpen} onOpenChange={setEditOpen} host={host} />
      <ConfirmDialog
        open={confirmDelete}
        onOpenChange={setConfirmDelete}
        title="Delete host?"
        description={`Permanently remove ${host.name}. Fails if any repair jobs reference it.`}
        confirmLabel="Delete"
        destructive
        pending={deleteMutation.isPending}
        onConfirm={() => deleteMutation.mutate()}
      />
    </div>
  );
}