"use client";

import { cn } from "@/lib/utils";
import type { CorpusItemDto } from "@/lib/api";
import { extractDomain, extractConcept } from "./constants";
import { Badge } from "@/components/ui/badge";
import { Shield, BookOpen } from "lucide-react";
import { EnrichmentBadge } from "./enrichment-badge";

interface CorpusRowProps {
  item: CorpusItemDto;
  className?: string;
}

// Map source scheme to display label
function getSourceLabel(source: string): string {
  if (source.startsWith("rfc://")) return "RFC";
  if (source.startsWith("owasp://")) return "OWASP";
  if (source.startsWith("community://")) return "Community";
  if (source.startsWith("vendor://")) return "Vendor";
  return "Unknown";
}

// Map tier to color variant
function getTierVariant(tier: number): "default" | "secondary" | "outline" {
  if (tier === 0) return "default"; // Regulatory/RFC/OWASP - highest authority
  if (tier <= 2) return "secondary"; // Clinical/Observational
  return "outline"; // Expert/Community/Anecdotal
}

export function CorpusRow({ item, className }: CorpusRowProps) {
  const domain = extractDomain(item.subject);
  const concept = extractConcept(item.subject);
  const sourceLabel = getSourceLabel(item.source);
  const tierVariant = getTierVariant(item.tier);

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card p-4 hover:border-border/80 transition-colors",
        className
      )}
    >
      {/* Header */}
      <div className="flex items-start justify-between gap-2 mb-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 mb-1">
            <Badge variant={tierVariant} className="text-xs font-mono">
              <Shield className="h-3 w-3 mr-1" />
              {sourceLabel}
            </Badge>
            <Badge variant="outline" className="text-xs font-mono">
              Tier {item.tier}
            </Badge>
            <span className="text-xs text-muted-foreground truncate">
              {domain}
            </span>
          </div>
          <h3 className="text-base font-medium text-foreground">
            {concept}
            <span className="text-muted-foreground font-normal">
              {" "}.{item.predicate}
            </span>
          </h3>
        </div>
      </div>

      {/* Category badge */}
      {item.category && (
        <div className="flex items-center gap-2 mb-3">
          <EnrichmentBadge category={item.category} />
        </div>
      )}

      {/* Value */}
      <div className="mb-4">
        <code className="text-sm bg-muted px-2 py-1 rounded font-mono break-all">
          {item.value}
        </code>
      </div>

      {/* Explanation */}
      <div className="mb-4 text-sm text-muted-foreground">
        <p>{item.explanation}</p>
      </div>

      {/* Authority Source */}
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <BookOpen className="h-3.5 w-3.5" />
        <span>{item.authority_source}</span>
      </div>
    </div>
  );
}
