"use client";

import { useState } from "react";
import type { QuarantinedAssertion } from "@/lib/api/types";
import { formatTimeAgo } from "@/lib/format";
import { Button } from "@/components/ui/button";
import { HashDisplay } from "@/components/skeptic/hash-display";
import { ReasonBadge } from "./reason-badge";

interface QuarantineRowProps {
  item: QuarantinedAssertion;
  onRestore: (hash: string) => void;
  onDelete: (hash: string) => void;
  isRestoring: boolean;
  isDeleting: boolean;
}

export function QuarantineRow({
  item,
  onRestore,
  onDelete,
  isRestoring,
  isDeleting,
}: QuarantineRowProps) {
  const [expanded, setExpanded] = useState(false);
  const isProcessing = isRestoring || isDeleting;

  return (
    <div className="rounded-lg border border-border bg-card p-4 transition-colors hover:bg-muted/50">
      {/* Header row */}
      <div className="flex items-start justify-between gap-4">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <ReasonBadge reason={item.reason} />
            <span className="font-mono text-sm text-foreground truncate">
              {item.subject}
            </span>
            <span className="text-muted-foreground">{"→"}</span>
            <span className="font-mono text-sm text-foreground truncate">
              {item.predicate}
            </span>
          </div>
          <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
            <HashDisplay hash={item.hash} label="Hash" />
            <span>
              Quarantined {formatTimeAgo(item.quarantined_at)} by{" "}
              <code className="font-mono bg-muted px-1 rounded">
                {item.quarantined_by}
              </code>
            </span>
          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {item.can_restore && (
            <Button
              variant="outline"
              size="sm"
              onClick={() => onRestore(item.hash)}
              disabled={isProcessing}
            >
              {isRestoring ? "..." : "Restore"}
            </Button>
          )}
          <Button
            variant="destructive"
            size="sm"
            onClick={() => onDelete(item.hash)}
            disabled={isProcessing}
          >
            {isDeleting ? "..." : "Delete"}
          </Button>
        </div>
      </div>

      {/* Value preview */}
      <div className="mt-3">
        <button
          onClick={() => setExpanded(!expanded)}
          className="text-xs text-muted-foreground hover:text-foreground transition-colors text-left w-full"
        >
          <span className="font-medium">Value:</span>{" "}
          <span className={expanded ? "" : "line-clamp-1"}>
            &quot;{item.value}&quot;
          </span>
          {!expanded && item.value.length > 80 && (
            <span className="text-primary ml-1">(click to expand)</span>
          )}
        </button>
      </div>
    </div>
  );
}
