"use client";

import { FolderOpen, Trash2, Power, PowerOff } from "lucide-react";
import { Button } from "@/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { cn } from "@/lib/utils";
import type { WorkspaceInfo } from "@/lib/api/workspace";

type WorkspaceRowProps = {
  workspace: WorkspaceInfo;
  onActivate: (id: string) => void;
  onDeactivate: () => void;
  onDelete: (id: string) => void;
  onClick: (id: string) => void;
};

export function WorkspaceRow({ workspace, onActivate, onDeactivate, onDelete, onClick }: WorkspaceRowProps) {
  return (
    <div
      className="group flex items-center gap-4 px-5 py-3.5 border-b border-foreground/5 hover:bg-foreground/[0.03] transition-colors cursor-pointer"
      onClick={() => onClick(workspace.id)}
    >
      {/* Status dot */}
      <div
        className={cn(
          "w-2 h-2 rounded-full shrink-0",
          workspace.is_active
            ? "bg-emerald-500 shadow-[0_0_6px_theme(colors.emerald.500)]"
            : "bg-zinc-500"
        )}
      />

      {/* Name + hover card */}
      <HoverCard openDelay={300} closeDelay={100}>
        <HoverCardTrigger asChild>
          <span className="font-bold text-sm text-foreground truncate cursor-default min-w-0 flex-shrink">
            {workspace.name}
          </span>
        </HoverCardTrigger>
        <HoverCardContent side="bottom" align="start" className="w-80 bg-popover/95 backdrop-blur-xl border-foreground/10">
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <FolderOpen className="w-4 h-4 text-primary" />
              <span className="font-black text-sm">{workspace.name}</span>
            </div>
            <div className="text-[10px] font-black uppercase tracking-widest text-primary">Path</div>
            <code className="text-xs font-mono text-foreground/70 break-all bg-black/20 p-3 block border border-foreground/5">
              {workspace.path}
            </code>
            {workspace.description && (
              <>
                <div className="text-[10px] font-black uppercase tracking-widest text-primary">Description</div>
                <p className="text-xs text-foreground/60">{workspace.description}</p>
              </>
            )}
            <div className="text-[10px] font-black uppercase tracking-widest text-primary">Status</div>
            <span className={cn(
              "text-xs font-bold",
              workspace.is_active ? "text-emerald-400" : "text-foreground/40"
            )}>
              {workspace.is_active ? "Active" : "Inactive"}
            </span>
          </div>
        </HoverCardContent>
      </HoverCard>

      {/* Path */}
      <span className="text-[10px] font-mono text-muted-foreground/50 truncate max-w-[300px] hidden lg:block">
        {workspace.path}
      </span>

      {/* Active badge */}
      {workspace.is_active && (
        <span className="text-[9px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 shrink-0">
          Active
        </span>
      )}

      {/* Spacer */}
      <div className="flex-1" />

      {/* Action buttons - visible on hover */}
      <div
        className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
        onClick={(e) => e.stopPropagation()}
      >
        {workspace.is_active ? (
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 text-muted-foreground hover:text-red-400 hover:bg-red-500/10"
            onClick={() => onDeactivate()}
            title="Deactivate"
          >
            <PowerOff className="w-3.5 h-3.5" />
          </Button>
        ) : (
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 text-muted-foreground hover:text-emerald-400 hover:bg-emerald-500/10"
            onClick={() => onActivate(workspace.id)}
            title="Activate"
          >
            <Power className="w-3.5 h-3.5" />
          </Button>
        )}
        <Button
          variant="ghost"
          size="icon"
          className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
          onClick={() => onDelete(workspace.id)}
          title="Delete"
        >
          <Trash2 className="w-3.5 h-3.5" />
        </Button>
      </div>
    </div>
  );
}
