'use client';

import { useExplainMode } from '@/contexts/ExplainModeContext';

interface ExplainModeToggleProps {
  variant?: 'compact' | 'full';
}

function EyeIcon({ open }: { open: boolean }) {
  if (open) {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
        <circle cx="12" cy="12" r="3" />
      </svg>
    );
  }
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M17.94 17.94A10.06 10.06 0 0 1 12 19c-6.5 0-10-7-10-7a17.81 17.81 0 0 1 4.06-5.06" />
      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a17.81 17.81 0 0 1-3.06 3.94" />
      <line x1="2" y1="2" x2="22" y2="22" />
    </svg>
  );
}

export default function ExplainModeToggle({ variant = 'compact' }: ExplainModeToggleProps) {
  const { explainMode, toggleExplainMode } = useExplainMode();

  if (variant === 'full') {
    return (
      <label
        className="flex cursor-pointer items-center justify-between gap-3 rounded border p-3"
        style={{
          background: 'var(--bg-surface)',
          borderColor: 'var(--border-light)',
          color: 'var(--text-primary)',
        }}
      >
        <span className="flex-1">
          <span className="block text-sm font-semibold">Explain Like I&apos;m New</span>
          <span className="block text-xs" style={{ color: 'var(--text-secondary)' }}>
            Adds plain-English notes under each number, grade, and signal.
          </span>
        </span>
        <input
          type="checkbox"
          checked={explainMode}
          onChange={toggleExplainMode}
          aria-label="Toggle Explain Like I'm New"
          className="h-5 w-9 cursor-pointer appearance-none rounded-full transition-colors"
          style={{
            background: explainMode ? 'var(--grade-a)' : 'var(--bg-elevated)',
          }}
        />
      </label>
    );
  }

  return (
    <button
      type="button"
      onClick={toggleExplainMode}
      aria-pressed={explainMode}
      aria-label={explainMode ? 'Disable explanations' : 'Enable explanations'}
      title={explainMode ? 'Explanations on' : 'Explanations off'}
      className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-semibold"
      style={{
        color: explainMode ? 'var(--grade-a)' : 'var(--text-tertiary)',
        background: explainMode ? 'rgba(0,212,160,0.10)' : 'transparent',
        border: '1px solid',
        borderColor: explainMode ? 'rgba(0,212,160,0.30)' : 'var(--border-light)',
      }}
    >
      <EyeIcon open={explainMode} />
      {explainMode && <span>Beginner</span>}
    </button>
  );
}