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

interface SerpEditorMockupProps {
  className?: string;
}

interface ScoreBarProps {
  label: string;
  value: number;
  max: number;
  status: 'success' | 'warning' | 'info';
}

/**
 * ScoreBar Component
 *
 * A single score bar showing label, fill, and value.
 */
function ScoreBar({ label, value, max, status }: ScoreBarProps) {
  const percentage = (value / max) * 100;

  const barColor =
    status === 'success'
      ? 'bg-green-500 dark:bg-green-600'
      : status === 'warning'
        ? 'bg-amber-500 dark:bg-amber-600'
        : 'bg-blue-500 dark:bg-blue-600';

  const displayValue = status === 'info' ? `${value}/${max}` : `${percentage.toFixed(0)}%`;

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between text-xs">
        <span className="text-muted-foreground">{label}</span>
        <span className="font-medium text-foreground">{displayValue}</span>
      </div>
      <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
        <div
          className={cn('h-full transition-all', barColor)}
          style={{ width: `${Math.min(percentage, 100)}%` }}
        />
      </div>
    </div>
  );
}

/**
 * SerpEditorMockup Component
 *
 * A visual mockup of a content editor with SERP scoring sidebar.
 * Shows a content area with highlighted terms and a scoring sidebar with metrics.
 */
export function SerpEditorMockup({ className = '' }: SerpEditorMockupProps) {
  return (
    <div
      className={cn(
        'rounded-lg border bg-card overflow-hidden shadow-sm grid grid-cols-1 md:grid-cols-3 gap-px',
        className
      )}
    >
      {/* Content Area - 2/3 width */}
      <div className="md:col-span-2 border-r border-border p-6 space-y-6">
        {/* Header */}
        <div className="space-y-1">
          <h2 className="text-2xl font-bold text-foreground">
            Best SEO Plugins for WordPress
          </h2>
          <p className="text-sm text-muted-foreground">
            Updated March 2026 with latest SEO best practices
          </p>
        </div>

        {/* Content with highlighted terms */}
        <div className="space-y-4 text-sm text-foreground leading-relaxed">
          <p>
            Finding the right{' '}
            <span className="bg-green-100 dark:bg-green-900/40 text-green-900 dark:text-green-100 px-1 rounded">
              WordPress plugin
            </span>{' '}
            for your SEO needs is crucial. We've tested dozens of tools and compiled this guide
            covering{' '}
            <span className="bg-green-100 dark:bg-green-900/40 text-green-900 dark:text-green-100 px-1 rounded">
              on-page optimization
            </span>
            ,{' '}
            <span className="bg-green-100 dark:bg-green-900/40 text-green-900 dark:text-green-100 px-1 rounded">
              technical SEO
            </span>
            , and more.
          </p>

          <p>
            This comprehensive{' '}
            <span className="bg-yellow-100 dark:bg-yellow-900/30 border-b-2 border-dashed border-yellow-500 text-foreground px-1">
              schema markup guide
            </span>{' '}
            will help you improve your rankings and increase click-through rates.
          </p>

          <p>
            Our data shows that properly implemented{' '}
            <span className="bg-green-100 dark:bg-green-900/40 text-green-900 dark:text-green-100 px-1 rounded">
              SEO best practices
            </span>{' '}
            can boost your traffic by up to 150%.
          </p>
        </div>
      </div>

      {/* Sidebar - 1/3 width */}
      <div className="p-6 space-y-5">
        {/* Score Ring */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                Content Score
              </p>
              <p className="text-xs text-muted-foreground">vs. top 10 SERP</p>
            </div>
            <div className="relative w-16 h-16 flex items-center justify-center">
              <svg className="w-full h-full transform -rotate-90" viewBox="0 0 64 64">
                <circle
                  cx="32"
                  cy="32"
                  r="28"
                  className="fill-none stroke-muted"
                  strokeWidth="3"
                />
                <circle
                  cx="32"
                  cy="32"
                  r="28"
                  className="fill-none stroke-green-500 dark:stroke-green-600"
                  strokeWidth="3"
                  strokeDasharray={`${2 * Math.PI * 28 * 0.82} ${2 * Math.PI * 28}`}
                />
              </svg>
              <span className="absolute text-xl font-bold text-green-600 dark:text-green-400">
                82
              </span>
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            <span className="text-green-600 dark:text-green-400 font-semibold">Live scoring</span>
            {' as you edit'}
          </p>
        </div>

        <div className="h-px bg-border" />

        {/* Score Bars */}
        <div className="space-y-4">
          <ScoreBar label="Term coverage" value={82} max={100} status="success" />
          <ScoreBar label="Word count" value={2140} max={2800} status="success" />
          <ScoreBar label="Headings" value={9} max={15} status="warning" />
          <ScoreBar label="Readability" value={7} max={10} status="info" />
        </div>
      </div>
    </div>
  );
}