pastel-ui/app/accessibility/contrast/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { ColorPicker } from '@/components/color/ColorPicker';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/utils/color';
import { ArrowLeftRight, Check, X } from 'lucide-react';

export default function ContrastPage() {
  const [foreground, setForeground] = useState('#000000');
  const [background, setBackground] = useState('#ffffff');
  const [ratio, setRatio] = useState<number | null>(null);
  const [compliance, setCompliance] = useState<any>(null);

  useEffect(() => {
    const fgRgb = hexToRgb(foreground);
    const bgRgb = hexToRgb(background);

    if (fgRgb && bgRgb) {
      const contrastRatio = getContrastRatio(fgRgb, bgRgb);
      setRatio(contrastRatio);
      setCompliance(checkWCAGCompliance(contrastRatio));
    }
  }, [foreground, background]);

  const swapColors = () => {
    const temp = foreground;
    setForeground(background);
    setBackground(temp);
  };

  const ComplianceItem = ({
    label,
    passed,
  }: {
    label: string;
    passed: boolean;
  }) => (
    <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
      <span className="text-sm">{label}</span>
      <Badge variant={passed ? 'success' : 'destructive'}>
        {passed ? (
          <>
            <Check className="h-3 w-3 mr-1" />
            Pass
          </>
        ) : (
          <>
            <X className="h-3 w-3 mr-1" />
            Fail
          </>
        )}
      </Badge>
    </div>
  );

  return (
    <div className="min-h-screen py-12">
      <div className="max-w-7xl mx-auto px-8 space-y-8">
        <div>
          <h1 className="text-4xl font-bold mb-2">Contrast Checker</h1>
          <p className="text-muted-foreground">
            Test color combinations for WCAG 2.1 compliance
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Color Pickers */}
          <div className="space-y-6">
            <div className="p-6 border rounded-lg bg-card">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold">Foreground Color</h2>
              </div>
              <ColorPicker color={foreground} onChange={setForeground} />
            </div>

            <div className="flex justify-center">
              <Button
                onClick={swapColors}
                variant="outline"
                size="icon"
                className="rounded-full"
              >
                <ArrowLeftRight className="h-4 w-4" />
              </Button>
            </div>

            <div className="p-6 border rounded-lg bg-card">
              <h2 className="text-xl font-semibold mb-4">Background Color</h2>
              <ColorPicker color={background} onChange={setBackground} />
            </div>
          </div>

          {/* Results */}
          <div className="space-y-6">
            {/* Preview */}
            <div className="p-6 border rounded-lg bg-card">
              <h2 className="text-xl font-semibold mb-4">Preview</h2>
              <div
                className="rounded-lg p-8 text-center"
                style={{ backgroundColor: background, color: foreground }}
              >
                <p className="text-xl font-bold mb-2">Normal Text (16px)</p>
                <p className="text-3xl font-bold">Large Text (24px)</p>
              </div>
            </div>

            {/* Contrast Ratio */}
            {ratio !== null && (
              <div className="p-6 border rounded-lg bg-card">
                <h2 className="text-xl font-semibold mb-4">Contrast Ratio</h2>
                <div className="text-center mb-6">
                  <div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
                  <p className="text-sm text-muted-foreground mt-2">
                    {ratio >= 7
                      ? 'Excellent contrast'
                      : ratio >= 4.5
                        ? 'Good contrast'
                        : ratio >= 3
                          ? 'Minimum contrast'
                          : 'Poor contrast'}
                  </p>
                </div>
              </div>
            )}

            {/* WCAG Compliance */}
            {compliance && (
              <div className="p-6 border rounded-lg bg-card">
                <h2 className="text-xl font-semibold mb-4">WCAG 2.1 Compliance</h2>
                <div className="space-y-4">
                  <div>
                    <h3 className="text-sm font-semibold mb-2">Level AA</h3>
                    <div className="space-y-2">
                      <ComplianceItem
                        label="Normal Text (4.5:1)"
                        passed={compliance.aa.normalText}
                      />
                      <ComplianceItem
                        label="Large Text (3:1)"
                        passed={compliance.aa.largeText}
                      />
                      <ComplianceItem
                        label="UI Components (3:1)"
                        passed={compliance.aa.ui}
                      />
                    </div>
                  </div>

                  <div>
                    <h3 className="text-sm font-semibold mb-2">Level AAA</h3>
                    <div className="space-y-2">
                      <ComplianceItem
                        label="Normal Text (7:1)"
                        passed={compliance.aaa.normalText}
                      />
                      <ComplianceItem
                        label="Large Text (4.5:1)"
                        passed={compliance.aaa.largeText}
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}