import React, { useState } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Eye, Type, MousePointer } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';
import { Switch } from '../../ui/switch';

export const AccessibilitySettingsView: React.FC = () => {
  const { addToast } = useToast();

  // States
  const [toggles, setToggles] = useState({
    highContrast: false,
    reduceMotion: false,
    keyboardHints: true,
    screenReader: false,
    dyslexiaFont: false,
    underlineLinks: false,
    largeCursor: false,
  });

  const toggle = (key: keyof typeof toggles) => {
    setToggles((prev) => ({ ...prev, [key]: !prev[key] }));
    addToast('Accessibility settings updated', 'info');
  };

  return (
    <div className="space-y-8 animate-fadeIn max-w-4xl mx-auto pb-20">
      {/* Header */}
      <div className="flex justify-between items-end border-b border-kodo-steel/50 pb-6">
        <div>
          <h2 className="text-3xl font-display font-bold text-white mb-2">
            ACCESSIBILITY
          </h2>
          <p className="text-gray-400 font-mono text-sm">
            Tools to make the platform work for you.
          </p>
        </div>
        <Button
          variant="primary"
          onClick={() => addToast('Settings saved', 'success')}
        >
          Save Changes
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Visuals */}
        <Card variant="default">
          <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
            <Eye className="w-5 h-5 text-kodo-cyan" /> Visuals
          </h3>
          <div className="space-y-4">
            <ToggleRow
              label="High Contrast"
              desc="Increase contrast between text and background"
              active={toggles.highContrast}
              onToggle={() => toggle('highContrast')}
            />
            <ToggleRow
              label="Reduce Motion"
              desc="Minimize animations and transitions"
              active={toggles.reduceMotion}
              onToggle={() => toggle('reduceMotion')}
            />
            <ToggleRow
              label="Underline Links"
              desc="Add underlines to all hyperlinks"
              active={toggles.underlineLinks}
              onToggle={() => toggle('underlineLinks')}
            />
          </div>
        </Card>

        {/* Typography & Input */}
        <Card variant="default">
          <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
            <Type className="w-5 h-5 text-kodo-magenta" /> Text & Input
          </h3>
          <div className="space-y-4">
            <ToggleRow
              label="Dyslexia Friendly Font"
              desc="Use OpenDyslexic font face"
              active={toggles.dyslexiaFont}
              onToggle={() => toggle('dyslexiaFont')}
            />
            <ToggleRow
              label="Screen Reader Optimization"
              desc="Enhanced ARIA labels and structure"
              active={toggles.screenReader}
              onToggle={() => toggle('screenReader')}
            />
            <ToggleRow
              label="Keyboard Hints"
              desc="Show shortcuts on interactive elements"
              active={toggles.keyboardHints}
              onToggle={() => toggle('keyboardHints')}
            />
          </div>
        </Card>

        {/* Mouse & Focus */}
        <Card variant="default" className="md:col-span-2">
          <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
            <MousePointer className="w-5 h-5 text-kodo-gold" /> Cursor & Focus
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <ToggleRow
              label="Large Cursor"
              desc="Increase mouse cursor size"
              active={toggles.largeCursor}
              onToggle={() => toggle('largeCursor')}
            />
          </div>
        </Card>
      </div>
    </div>
  );
};

const ToggleRow: React.FC<{
  label: string;
  desc: string;
  active: boolean;
  onToggle: () => void;
}> = ({ label, desc, active, onToggle }) => (
  <div
    onClick={onToggle}
    className="flex items-center justify-between p-3 rounded-lg hover:bg-white/5 cursor-pointer group"
  >
    <div>
      <div className="text-sm font-bold text-white group-hover:text-kodo-cyan transition-colors">
        {label}
      </div>
      <div className="text-xs text-gray-400">{desc}</div>
    </div>
    <Switch checked={active} onChange={onToggle} />
  </div>
);
