'use client';

import * as React from 'react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { EmptyState } from '@/components/ui/EmptyState';
import { Copy, X, Download, GitCompare } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import type { FigletFont } from '@/types/figlet';

export interface ComparisonModeProps {
  text: string;
  selectedFonts: string[];
  fontResults: Record<string, string>;
  onRemoveFont: (fontName: string) => void;
  onCopyFont: (fontName: string, result: string) => void;
  onDownloadFont: (fontName: string, result: string) => void;
  className?: string;
}

export function ComparisonMode({
  text,
  selectedFonts,
  fontResults,
  onRemoveFont,
  onCopyFont,
  onDownloadFont,
  className,
}: ComparisonModeProps) {
  return (
    <div className={cn('space-y-4', className)}>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">Font Comparison</h2>
        <span className="text-sm text-muted-foreground">
          {selectedFonts.length} font{selectedFonts.length !== 1 ? 's' : ''} selected
        </span>
      </div>

      {selectedFonts.length === 0 ? (
        <Card>
          <EmptyState
            icon={GitCompare}
            title="No fonts selected for comparison"
            description="Click the + icon next to any font in the font selector to add it to the comparison"
            className="py-12"
          />
        </Card>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {selectedFonts.map((fontName, index) => (
            <Card
              key={fontName}
              className="relative scale-in"
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <div className="p-4 space-y-3">
                {/* Font Header */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-mono font-semibold px-2 py-1 bg-primary/10 text-primary rounded">
                      {fontName}
                    </span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onCopyFont(fontName, fontResults[fontName] || '')}
                      className="h-8 w-8 p-0"
                      title="Copy to clipboard"
                    >
                      <Copy className="h-3.5 w-3.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onDownloadFont(fontName, fontResults[fontName] || '')}
                      className="h-8 w-8 p-0"
                      title="Download"
                    >
                      <Download className="h-3.5 w-3.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onRemoveFont(fontName)}
                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                      title="Remove from comparison"
                    >
                      <X className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>

                {/* ASCII Art Preview */}
                <div className="relative">
                  <pre className="p-4 bg-muted rounded-md overflow-x-auto">
                    <code className="text-xs font-mono whitespace-pre">
                      {fontResults[fontName] || 'Loading...'}
                    </code>
                  </pre>
                </div>

                {/* Stats */}
                {fontResults[fontName] && (
                  <div className="flex gap-4 text-xs text-muted-foreground">
                    <span>
                      {fontResults[fontName].split('\n').length} lines
                    </span>
                    <span>
                      {Math.max(
                        ...fontResults[fontName].split('\n').map((line) => line.length)
                      )} chars wide
                    </span>
                  </div>
                )}
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}