import { useState } from 'react';
import { Copy, Check, Server, Wrench } from 'lucide-react';
import { useGlobal } from 'hooks/useGlobal';
import { useResources, type Resource } from '@/state/useResources';

const CopyCommand = ({ command }: { command: string }) => {
  const [copied, setCopied] = useState(false);

  const copy = () => {
    navigator.clipboard.writeText(command);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div className="flex items-center gap-1 mt-1">
      <code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-xs text-duck-dark/70">{command}</code>
      <button
        type="button"
        onClick={copy}
        className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
      >
        {copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5 text-duck-dark/50" />}
      </button>
    </div>
  );
};

const CommandRow = ({ label, command }: { label: string; command: string }) => (
  <div className="text-xs text-duck-dark/50">
    {label}:
    <CopyCommand command={command} />
  </div>
);

export const Resources = () => {
  const { resources } = useResources();
  const [selectedId] = useGlobal<string | null>('RESOURCE_SELECTED', null);

  const resource = resources?.find((r: Resource) => r.id === selectedId);

  if (!resource) {
    return (
      <div className="h-full flex items-center justify-center">
        <p className="text-sm text-duck-dark/30">Select a resource to view details</p>
      </div>
    );
  }

  return (
    <div className="h-full overflow-y-auto p-6">
      <div className="flex items-center gap-2 mb-1">
        {resource.port ? (
          <Server className="h-4 w-4 text-duck-teal shrink-0" />
        ) : (
          <Wrench className="h-4 w-4 text-duck-dark/40 shrink-0" />
        )}
        <h2 className="text-lg font-bold text-duck-dark">{resource.name}</h2>
        <span className="text-sm text-duck-dark/40">{resource.subtitle}</span>
      </div>

      <div className="flex items-center gap-2 mb-4">
        <span className="text-xs bg-duck-dark/5 text-duck-dark/50 rounded-full px-2 py-0.5">{resource.type}</span>
        {resource.port && (
          <span className="text-xs bg-duck-teal/10 text-duck-teal rounded-full px-2 py-0.5">:{resource.port}</span>
        )}
        {resource.installed ? (
          <span className="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5">
            {resource.version ?? 'Running'}
          </span>
        ) : (
          <span className="text-xs bg-duck-dark/5 text-duck-dark/40 rounded-full px-2 py-0.5">Not installed</span>
        )}
      </div>

      <p className="text-sm text-duck-dark/70 mb-6">{resource.description}</p>

      <div className="flex flex-col gap-2">
        {resource.installCommand && <CommandRow label="Install" command={resource.installCommand} />}
        {resource.uninstallCommand && <CommandRow label="Uninstall" command={resource.uninstallCommand} />}
        {resource.manageCommand && <CommandRow label="Manage" command={resource.manageCommand} />}
        {resource.verifyCommand && <CommandRow label="Verify" command={resource.verifyCommand} />}
        {resource.updateCommand && <CommandRow label="Update" command={resource.updateCommand} />}
      </div>
    </div>
  );
};