import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ExternalLink, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

export function MetricCard({ icon: Icon, label, value }: { icon: React.ComponentType<{ className?: string }>; label: string; value: string }) {
  return (
    <Card>
      <CardContent className="flex items-center gap-3 p-4">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-400">
          <Icon className="h-5 w-5" />
        </div>
        <div className="min-w-0">
          <p className="text-xs font-medium text-gray-500 dark:text-gray-400">{label}</p>
          <p className="truncate text-lg font-semibold text-gray-900 dark:text-gray-100">{value}</p>
        </div>
      </CardContent>
    </Card>
  );
}

export function DetailList({ title, items, tone }: { title: string; items: string[]; tone: "green" | "yellow" }) {
  return (
    <div className="space-y-2">
      <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
      {items.map((item) => (
        <div key={item} className="flex gap-2 text-sm text-gray-600 dark:text-gray-300">
          <span className={cn("mt-1.5 h-2 w-2 shrink-0 rounded-full", tone === "green" ? "bg-green-500" : "bg-yellow-500")} />
          <span>{item}</span>
        </div>
      ))}
    </div>
  );
}

export function PipelineCard({ icon: Icon, label, value }: { icon: React.ComponentType<{ className?: string }>; label: string; value: string }) {
  const ready = value === "ready";
  return (
    <Card>
      <CardContent className="flex items-center justify-between gap-3 p-4">
        <div className="flex items-center gap-3">
          <Icon className="h-5 w-5 text-red-500" />
          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{label}</span>
        </div>
        <Badge variant={ready ? "success" : value === "failed" ? "destructive" : "warning"}>{value}</Badge>
      </CardContent>
    </Card>
  );
}

export function TimelineRow({ title, meta, status }: { title: string; meta: string; status: string }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded-lg border border-gray-200 p-3 text-sm dark:border-gray-800">
      <div>
        <p className="font-medium text-gray-900 dark:text-gray-100">{title}</p>
        <p className="text-xs text-gray-500 dark:text-gray-400">{meta}</p>
      </div>
      <Badge variant={status === "delivered" ? "success" : status === "failed" ? "destructive" : "warning"}>{status}</Badge>
    </div>
  );
}

export function MetaRow({ icon: Icon, label, value }: { icon: React.ComponentType<{ className?: string }>; label: string; value: string }) {
  return (
    <div className="flex gap-2">
      <Icon className="mt-0.5 h-4 w-4 shrink-0 text-gray-400" />
      <div className="min-w-0">
        <p className="text-xs font-medium text-gray-500 dark:text-gray-400">{label}</p>
        <p className="break-words text-gray-900 dark:text-gray-100">{value}</p>
      </div>
    </div>
  );
}

export function AssetRow({
  icon: Icon,
  label,
  value,
  actionText,
  onClick,
  isLoading,
  disabled,
  hideValue = false,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value?: string | null;
  actionText?: string;
  onClick?: () => void;
  isLoading?: boolean;
  disabled?: boolean;
  hideValue?: boolean;
}) {
  const isUrl = value?.startsWith("http");

  return (
    <div className="flex items-center justify-between py-3 first:pt-0 last:pb-0 gap-3">
      <div className="flex items-center gap-3 min-w-0">
        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-400 border border-gray-100 dark:border-gray-800">
          <Icon className="h-4.5 w-4.5" />
        </div>
        <div className="min-w-0">
          <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{label}</p>
          {!value ? (
            <p className="text-xs text-gray-400 dark:text-gray-500">Not available yet</p>
          ) : !hideValue ? (
            <p className="text-xs font-mono text-gray-500 dark:text-gray-400 mt-0.5 truncate max-w-[180px] sm:max-w-none">{value}</p>
          ) : null}
        </div>
      </div>

      {value && (onClick || isUrl) ? (
        <Button
          size="sm"
          variant="outline"
          className="h-8 text-xs shrink-0 font-medium border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors"
          onClick={onClick}
          disabled={disabled || isLoading}
          asChild={isUrl && !onClick}
        >
          {isUrl && !onClick ? (
            <a href={value} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
              {actionText || "Open"}
              <ExternalLink className="h-3 w-3" />
            </a>
          ) : (
            <span className="flex items-center gap-1">
              {isLoading ? (
                <Loader2 className="h-3 w-3 animate-spin mr-1" />
              ) : null}
              {actionText || "Open"}
            </span>
          )}
        </Button>
      ) : !value ? (
        <span className="text-xs font-medium text-gray-400 dark:text-gray-500 mr-1">Unavailable</span>
      ) : null}
    </div>
  );
}

export function CheckLine({ label, ok }: { label: string; ok: boolean }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-gray-700 dark:text-gray-300">{label}</span>
      <Badge variant={ok ? "success" : "warning"}>{ok ? "OK" : "Pending"}</Badge>
    </div>
  );
}