import React from 'react';
import { AlertTriangle, Loader2, ArrowUp, RotateCw, ExternalLink } from 'lucide-react';
import { DockerStatus, DockerVersion } from '../../types';
import { StatusBadge } from './StatusBadge';
import { DetailRow } from './DetailRow';
import { Button } from '../../components/ui/button';
import { Card, CardContent } from '../../components/ui/card';
import { Alert, AlertDescription } from '../../components/ui/alert';
import dockerIcon from '../../assets/docker-icon.png';

interface DockerStatusCardProps {
  status: DockerStatus;
  installing: boolean;
  updating: boolean;
  reinstalling?: boolean;
  homebrewInstalled: boolean;
  availableVersions?: DockerVersion[];
  selectedReinstallVersion?: string;
  onVersionChange?: (version: string) => void;
  onInstall: () => void;
  onUpdate: () => void;
  onReinstall?: () => void;
  onOpenDocker?: () => void;
}

export const DockerStatusCard: React.FC<DockerStatusCardProps> = ({
  status,
  installing,
  updating,
  reinstalling = false,
  homebrewInstalled,
  availableVersions = [],
  selectedReinstallVersion = 'latest',
  onVersionChange,
  onInstall,
  onUpdate,
  onReinstall,
  onOpenDocker
}) => {
  return (
    <Card className="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 overflow-hidden flex-shrink-0">
            <img src={dockerIcon} alt="Docker" className="w-full h-full object-cover" />
          </div>
          <div>
            <h3 className="text-[15px] font-semibold text-foreground">Docker</h3>
            <StatusBadge installed={status.installed} running={status.daemonRunning} />
          </div>
        </div>
        {status.installed && onOpenDocker && (
          <Button
            onClick={onOpenDocker}
            variant="outline"
            size="sm"
            className="h-8 text-xs"
          >
            <ExternalLink className="h-3.5 w-3.5 mr-1.5" />
            Open Docker
          </Button>
        )}
      </div>

      {status.installed ? (
        <div className="space-y-4">
          <div className="space-y-1">
            {status.version && (
              <DetailRow label="Docker CLI Version" value={status.version} />
            )}
            {status.dockerDesktopVersion && (
              <DetailRow
                label="Docker Desktop Version"
                value={
                  status.updateAvailable && status.latestVersion
                    ? `${status.dockerDesktopVersion} (Latest: ${status.latestVersion})`
                    : status.updateAvailable
                    ? `${status.dockerDesktopVersion} (Update available)`
                    : `${status.dockerDesktopVersion} (Latest)`
                }
                valueClassName={status.updateAvailable ? 'text-orange-600' : 'text-green-600'}
              />
            )}
            {status.composeInstalled && (
              <DetailRow
                label="Docker Compose"
                value={status.composeVersion || 'Installed'}
              />
            )}
          </div>

          {status.settings && (
            <div className="space-y-1 pt-2 border-t border-border">
              <DetailRow
                label="CPUs"
                value={`${status.settings.cpus} (recommended: ${status.settings.cpusRecommended})`}
                valueClassName={status.settings.cpus < status.settings.cpusRecommended ? 'text-orange-600' : undefined}
              />
              <DetailRow
                label="Memory"
                value={`${(status.settings.memoryMiB / 1024).toFixed(1)} GB (recommended: ${(status.settings.memoryRecommended / 1024).toFixed(0)} GB)`}
                valueClassName={status.settings.memoryMiB < status.settings.memoryRecommended ? 'text-orange-600' : undefined}
              />
              <DetailRow
                label="Swap"
                value={`${(status.settings.swapMiB / 1024).toFixed(1)} GB (recommended: ${(status.settings.swapRecommended / 1024).toFixed(1)} GB)`}
                valueClassName={status.settings.swapMiB < status.settings.swapRecommended ? 'text-orange-600' : undefined}
              />
              <DetailRow
                label="Disk image size"
                value={`${(status.settings.diskSizeMiB / 1024).toFixed(0)} GB (recommended: ${(status.settings.diskSizeRecommended / 1024).toFixed(0)} GB)`}
                valueClassName={status.settings.diskSizeMiB < status.settings.diskSizeRecommended ? 'text-orange-600' : undefined}
              />
            </div>
          )}

          {/* Update available card hidden per user request */}
          {/* {status.updateAvailable && (
            <Alert className="border-blue-200 dark:border-blue-900/50 bg-blue-50 dark:bg-blue-950/50 text-blue-900 dark:text-blue-200 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400">
              <ArrowUp className="h-4 w-4" />
              <AlertDescription>
                <p className="font-medium mb-1">Update available</p>
                <p className="text-xs">
                  Docker Desktop {status.latestVersion || 'latest version'} is available.
                  {status.dockerDesktopVersion && ` (Current: ${status.dockerDesktopVersion})`}
                </p>
                {homebrewInstalled && (
                  <Button
                    onClick={onUpdate}
                    disabled={updating}
                    className="mt-3 h-8 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium"
                  >
                    {updating ? (
                      <>
                        <Loader2 className="h-3.5 w-3.5 mr-2 animate-spin" />
                        Updating...
                      </>
                    ) : (
                      <>
                        <ArrowUp className="h-3.5 w-3.5 mr-2" />
                        Update Now
                      </>
                    )}
                  </Button>
                )}
              </AlertDescription>
            </Alert>
          )} */}

          {!status.daemonRunning && (
            <Alert variant="warning">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>
                <p className="font-medium mb-1">Docker daemon is not running</p>
                <p className="text-xs">Please start Docker Desktop from your Applications folder.</p>
              </AlertDescription>
            </Alert>
          )}

          {homebrewInstalled && onReinstall && (
            <div className="pt-3 border-t border-border space-y-2">
              <p className="text-xs text-muted-foreground">
                Having issues with Docker? Try reinstalling it.
              </p>
              <div className="flex items-center gap-2">
                <select
                  value={selectedReinstallVersion}
                  onChange={(e) => onVersionChange?.(e.target.value)}
                  disabled={reinstalling || installing || updating}
                  className="flex-1 h-9 text-xs border border-border rounded-md px-2 bg-background text-foreground disabled:opacity-50"
                >
                  {availableVersions.length === 0 ? (
                    <option value="latest">Latest</option>
                  ) : (
                    availableVersions.map((v, i) => (
                      <option key={v.version} value={v.isLatest ? 'latest' : v.version}>
                        {v.isLatest ? `Latest (${v.version})` : v.version}
                      </option>
                    ))
                  )}
                </select>
                <Button
                  onClick={onReinstall}
                  disabled={reinstalling || installing || updating}
                  variant="outline"
                  className="h-9 text-xs flex-shrink-0"
                >
                  {reinstalling ? (
                    <>
                      <Loader2 className="h-3.5 w-3.5 mr-2 animate-spin" />
                      Reinstalling...
                    </>
                  ) : (
                    <>
                      <RotateCw className="h-3.5 w-3.5 mr-2" />
                      Reinstall
                    </>
                  )}
                </Button>
              </div>
            </div>
          )}
        </div>
      ) : (
        <div className="space-y-4">
          <p className="text-[13px] text-muted-foreground">
            Docker is not installed on your system. Docker is required for containerized development environments.
          </p>

          {homebrewInstalled ? (
            <Button
              onClick={onInstall}
              disabled={installing}
              className="w-full h-10 bg-[#007AFF] hover:bg-[#0066DD] text-white text-[13px] font-medium"
            >
              {installing ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Installing...
                </>
              ) : (
                'Install Docker via Homebrew'
              )}
            </Button>
          ) : (
            <div className="p-3 rounded-md bg-yellow-50 border border-yellow-200">
              <p className="text-xs text-yellow-900">
                Homebrew is required to install Docker automatically. Please install Homebrew first.
              </p>
            </div>
          )}

          <p className="text-xs text-muted-foreground">
            You can also{' '}
            <a
              href="https://www.docker.com/products/docker-desktop"
              target="_blank"
              rel="noopener noreferrer"
              className="text-blue-600 dark:text-blue-400 underline hover:text-blue-700 dark:hover:text-blue-300"
            >
              download Docker Desktop manually
            </a>
            {' '}from the official website.
          </p>
        </div>
      )}
    </Card>
  );
};
