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

interface ContentEditorMockupProps {
  className?: string;
}

interface TermItem {
  term: string;
  found: boolean;
}

const terms: TermItem[] = [
  { term: 'wordpress seo', found: true },
  { term: 'search console', found: true },
  { term: 'meta description', found: true },
  { term: 'internal linking', found: false },
];

const SCORE = 78;
const RADIUS = 32;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
const STROKE_DASHARRAY = `${(SCORE / 100) * CIRCUMFERENCE} ${CIRCUMFERENCE}`;

export function ContentEditorMockup({ className }: ContentEditorMockupProps) {
  return (
    <div
      className={cn(
        'rounded-xl overflow-hidden border border-border/50 bg-card shadow-2xl',
        className,
      )}
      role="img"
      aria-label="RankWiz content editor with real-time SERP scoring sidebar"
    >
      {/* Browser chrome */}
      <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/60 border-b border-border/40">
        <div className="flex gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full bg-rose-400/70" />
          <span className="w-2.5 h-2.5 rounded-full bg-warning/70" />
          <span className="w-2.5 h-2.5 rounded-full bg-success/70" />
        </div>
        <div className="flex-1 mx-3 bg-background/70 rounded px-3 py-0.5 text-xs text-muted-foreground font-mono truncate">
          rankwiz.app — Content Editor
        </div>
      </div>

      {/* Two-panel layout */}
      <div className="grid grid-cols-5 gap-0">
        {/* Left panel: Editor */}
        <div className="col-span-3 p-4 border-r border-border/30">
          <div className="space-y-3">
            {/* Title */}
            <div className="text-sm font-bold text-foreground leading-snug">
              10 SEO Tips for WordPress...
            </div>

            {/* Fake paragraph lines */}
            <div className="space-y-1.5">
              <div className="h-2 rounded-full bg-muted-foreground/15 w-full" />
              <div className="h-2 rounded-full bg-muted-foreground/15 w-11/12" />
              <div className="h-2 rounded-full bg-muted-foreground/15 w-4/5" />
            </div>

            {/* Subheading */}
            <div className="text-xs font-semibold text-foreground/80">
              Why Search Console Matters
            </div>

            {/* More paragraph lines */}
            <div className="space-y-1.5">
              <div className="h-2 rounded-full bg-muted-foreground/15 w-full" />
              <div className="h-2 rounded-full bg-muted-foreground/15 w-10/12" />
              <div className="h-2 rounded-full bg-muted-foreground/15 w-3/4" />
              <div className="h-2 rounded-full bg-muted-foreground/15 w-5/6" />
            </div>
          </div>
        </div>

        {/* Right panel: SERP score sidebar */}
        <div className="col-span-2 p-4 space-y-4">
          {/* Circular gauge */}
          <div className="flex flex-col items-center gap-1">
            <span className="text-xs font-semibold text-foreground">SERP Score</span>
            <svg
              width="80"
              height="80"
              viewBox="0 0 80 80"
              aria-hidden="true"
              className="overflow-visible"
            >
              {/* Background circle */}
              <circle
                cx="40"
                cy="40"
                r={RADIUS}
                fill="none"
                strokeWidth="6"
                className="stroke-muted/60"
              />
              {/* Score arc */}
              <circle
                cx="40"
                cy="40"
                r={RADIUS}
                fill="none"
                strokeWidth="6"
                strokeLinecap="round"
                strokeDasharray={STROKE_DASHARRAY}
                strokeDashoffset="0"
                transform="rotate(-90 40 40)"
                className="stroke-success"
              />
              {/* Score text */}
              <text
                x="40"
                y="37"
                textAnchor="middle"
                className="fill-foreground"
                style={{ fontSize: '16px', fontWeight: 700 }}
              >
                {SCORE}
              </text>
              <text
                x="40"
                y="50"
                textAnchor="middle"
                className="fill-muted-foreground"
                style={{ fontSize: '9px' }}
              >
                / 100
              </text>
            </svg>
          </div>

          {/* Term checklist */}
          <div className="space-y-1.5">
            <span className="text-xs font-semibold text-foreground">Key Terms</span>
            <div className="space-y-1">
              {terms.map((item) => (
                <div key={item.term} className="flex items-center gap-1.5 text-xs">
                  {item.found ? (
                    <svg
                      width="12"
                      height="12"
                      viewBox="0 0 12 12"
                      aria-hidden="true"
                      className="shrink-0"
                    >
                      <path
                        d="M2.5 6L5 8.5L9.5 3.5"
                        fill="none"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="stroke-success"
                      />
                    </svg>
                  ) : (
                    <svg
                      width="12"
                      height="12"
                      viewBox="0 0 12 12"
                      aria-hidden="true"
                      className="shrink-0"
                    >
                      <path
                        d="M3 3L9 9M9 3L3 9"
                        fill="none"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        className="stroke-destructive"
                      />
                    </svg>
                  )}
                  <span
                    className={cn(
                      'truncate',
                      item.found ? 'text-foreground' : 'text-muted-foreground',
                    )}
                  >
                    {item.term}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}