"use client";

import { ExternalLink, Eye, Ban, RotateCcw } from "lucide-react";
import type { SourceRecordDto } from "@/lib/api/types";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "./status-badge";
import { TierBadge } from "./tier-badge";

interface SourceRowProps {
  source: SourceRecordDto;
  onViewImpact: (source: SourceRecordDto) => void;
  onBlock: (source: SourceRecordDto) => void;
  onRestore: (source: SourceRecordDto) => void;
}

export function SourceRow({
  source,
  onViewImpact,
  onBlock,
  onRestore,
}: SourceRowProps) {
  const createdDate = new Date(source.created_at).toLocaleDateString();
  const updatedDate = new Date(source.updated_at).toLocaleDateString();

  return (
    <div className="rounded-lg border border-border p-4 hover:bg-accent/5 transition-colors">
      <div className="flex items-start justify-between gap-4">
        {/* Left: Source info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <StatusBadge status={source.status} />
            <TierBadge tier={source.tier} tierLabel={source.tier_label} />
            <span className="font-medium text-foreground truncate">
              {source.label}
            </span>
          </div>

          <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
            <span className="font-mono text-xs" title={source.hash}>
              {source.hash.slice(0, 12)}...
            </span>
            <span>Created: {createdDate}</span>
            {updatedDate !== createdDate && (
              <span>Updated: {updatedDate}</span>
            )}
          </div>

          {source.url && (
            <a
              href={source.url}
              target="_blank"
              rel="noopener noreferrer"
              className="mt-1 inline-flex items-center gap-1 text-xs text-primary hover:underline"
            >
              <ExternalLink className="h-3 w-3" />
              {source.url}
            </a>
          )}

          {source.notes && (
            <p className="mt-2 text-sm text-muted-foreground line-clamp-2">
              {source.notes}
            </p>
          )}
        </div>

        {/* Right: Actions */}
        <div className="flex items-center gap-2 shrink-0">
          <Button
            variant="outline"
            size="sm"
            onClick={() => onViewImpact(source)}
          >
            <Eye className="h-4 w-4 mr-1" />
            View Impact
          </Button>

          {source.status === "quarantined" ? (
            <Button
              variant="outline"
              size="sm"
              onClick={() => onRestore(source)}
            >
              <RotateCcw className="h-4 w-4 mr-1" />
              Restore
            </Button>
          ) : (
            <Button
              variant="destructive"
              size="sm"
              onClick={() => onBlock(source)}
            >
              <Ban className="h-4 w-4 mr-1" />
              Block
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}
