import { cn } from '@/lib/utils';

interface SpreadsheetMockupProps {
  className?: string;
}

/**
 * SpreadsheetMockup Component
 *
 * A visual mockup of manual GSC data analysis using a spreadsheet.
 * Shows a fake spreadsheet interface with highlighted cells and error values
 * to illustrate the pain of manual analysis.
 */
export function SpreadsheetMockup({ className = '' }: SpreadsheetMockupProps) {
  return (
    <div className={cn('rounded-lg border bg-card overflow-hidden shadow-sm', className)}>
      {/* Toolbar */}
      <div className="border-b bg-muted/30 px-4 py-2 flex items-center gap-6">
        <button className="text-sm font-medium text-foreground hover:text-primary transition">
          File
        </button>
        <button className="text-sm font-medium text-foreground hover:text-primary transition">
          Edit
        </button>
        <button className="text-sm font-medium text-foreground hover:text-primary transition">
          View
        </button>
        <button className="text-sm font-medium text-foreground hover:text-primary transition">
          Format
        </button>
      </div>

      {/* Spreadsheet Grid */}
      <div className="overflow-x-auto">
        <table className="w-full border-collapse text-sm">
          <thead>
            <tr className="border-b bg-muted/50">
              <th className="border-r border-border px-4 py-3 text-left text-xs font-semibold text-muted-foreground w-12">
                #
              </th>
              <th className="border-r border-border px-4 py-3 text-left text-xs font-semibold text-muted-foreground">
                Page URL
              </th>
              <th className="border-r border-border px-4 py-3 text-right text-xs font-semibold text-muted-foreground w-20">
                Clicks
              </th>
              <th className="border-r border-border px-4 py-3 text-right text-xs font-semibold text-muted-foreground w-20">
                Impr.
              </th>
              <th className="px-4 py-3 text-right text-xs font-semibold text-muted-foreground w-16">
                CTR
              </th>
            </tr>
          </thead>
          <tbody>
            {/* Row 1: No highlight */}
            <tr className="border-b border-border hover:bg-muted/20">
              <td className="border-r border-border px-4 py-2 text-muted-foreground">1</td>
              <td className="border-r border-border px-4 py-2 font-mono text-xs">
                /best-seo-plugins
              </td>
              <td className="border-r border-border px-4 py-2 text-right">845</td>
              <td className="border-r border-border px-4 py-2 text-right">12,340</td>
              <td className="px-4 py-2 text-right">6.8%</td>
            </tr>

            {/* Row 2: Yellow highlight on Clicks cell */}
            <tr className="border-b border-border hover:bg-muted/20">
              <td className="border-r border-border px-4 py-2 text-muted-foreground">2</td>
              <td className="border-r border-border px-4 py-2 font-mono text-xs">
                /wordpress-seo-guide
              </td>
              <td className="border-r border-border px-4 py-2 text-right bg-yellow-50 dark:bg-yellow-950/30">
                312
              </td>
              <td className="border-r border-border px-4 py-2 text-right">8,950</td>
              <td className="px-4 py-2 text-right">3.5%</td>
            </tr>

            {/* Row 3: Yellow highlight on Impr. cell */}
            <tr className="border-b border-border hover:bg-muted/20">
              <td className="border-r border-border px-4 py-2 text-muted-foreground">3</td>
              <td className="border-r border-border px-4 py-2 font-mono text-xs">
                /on-page-optimization
              </td>
              <td className="border-r border-border px-4 py-2 text-right">521</td>
              <td className="border-r border-border px-4 py-2 text-right bg-yellow-50 dark:bg-yellow-950/30">
                15,670
              </td>
              <td className="px-4 py-2 text-right">3.3%</td>
            </tr>

            {/* Row 4: Red error value */}
            <tr className="border-b border-border hover:bg-muted/20">
              <td className="border-r border-border px-4 py-2 text-muted-foreground">4</td>
              <td className="border-r border-border px-4 py-2 font-mono text-xs">
                /keyword-research-tools
              </td>
              <td className="border-r border-border px-4 py-2 text-right text-red-600 dark:text-red-400">
                #ERROR
              </td>
              <td className="border-r border-border px-4 py-2 text-right">6,210</td>
              <td className="px-4 py-2 text-right">—</td>
            </tr>

            {/* Row 5: Yellow and red combo */}
            <tr className="hover:bg-muted/20">
              <td className="border-r border-border px-4 py-2 text-muted-foreground">5</td>
              <td className="border-r border-border px-4 py-2 font-mono text-xs">
                /backlink-analysis
              </td>
              <td className="border-r border-border px-4 py-2 text-right bg-yellow-50 dark:bg-yellow-950/30">
                189
              </td>
              <td className="border-r border-border px-4 py-2 text-right text-red-600 dark:text-red-400">
                #REF!
              </td>
              <td className="px-4 py-2 text-right text-red-600 dark:text-red-400">2.1%</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Caption */}
      <div className="border-t bg-muted/20 px-4 py-3">
        <p className="text-sm text-muted-foreground italic">
          Which page is actually losing traffic...?
        </p>
      </div>
    </div>
  );
}