import React from 'react';
import { HomebrewStatus } from '../../types';
import { StatusBadge } from './StatusBadge';
import { DetailRow } from './DetailRow';
import { Copy } from 'lucide-react';
import { Button } from '../../components/ui/button';

interface HomebrewStatusCardProps {
  status: HomebrewStatus;
}

export const HomebrewStatusCard: React.FC<HomebrewStatusCardProps> = ({ status }) => {
  const installCommand = '/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"';

  const copyToClipboard = () => {
    navigator.clipboard.writeText(installCommand);
  };

  return (
    <div className="rounded-lg border border-[#e0e0e0] bg-white p-5">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-lg bg-[#FBB040] flex items-center justify-center text-2xl">
            🍺
          </div>
          <div>
            <h3 className="text-[15px] font-semibold text-[#333]">Homebrew</h3>
            <StatusBadge installed={status.installed} />
          </div>
        </div>
      </div>

      {status.installed ? (
        <div className="space-y-1">
          {status.version && (
            <DetailRow label="Version" value={status.version} />
          )}
          {status.path && (
            <DetailRow label="Install Path" value={status.path} valueClassName="font-mono text-xs" />
          )}
        </div>
      ) : (
        <div className="space-y-4">
          <p className="text-[13px] text-[#666]">
            Homebrew is not installed on your system. Homebrew is a package manager for macOS that makes it easy to install development tools.
          </p>

          <div className="space-y-2">
            <p className="text-xs font-semibold text-[#333]">To install Homebrew, run this command in your Terminal:</p>
            <div className="relative">
              <pre className="p-3 rounded-md bg-[#f5f5f5] border border-[#e0e0e0] text-xs font-mono text-[#333] overflow-x-auto">
                {installCommand}
              </pre>
              <Button
                onClick={copyToClipboard}
                variant="ghost"
                size="sm"
                className="absolute top-2 right-2 h-7 px-2"
              >
                <Copy className="h-3.5 w-3.5" />
              </Button>
            </div>
          </div>

          <p className="text-xs text-[#999]">
            After installation, restart Instructure Agent to detect Homebrew.{' '}
            <a
              href="https://brew.sh"
              target="_blank"
              rel="noopener noreferrer"
              className="text-[#007AFF] underline hover:text-[#0066DD]"
            >
              Learn more about Homebrew
            </a>
          </p>
        </div>
      )}
    </div>
  );
};
