'use client';

import { useState, useEffect } from 'react';
import { ColorPicker } from '@/components/pastel/ColorPicker';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { AppPage } from '@/components/layout/AppPage';
import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/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 ? 'default' : 'destructive'}>
        {passed ? (
          <>
            <Check className="h-3 w-3 mr-1" />
            Pass
          </>
        ) : (
          <>
            <X className="h-3 w-3 mr-1" />
            Fail
          </>
        )}
      </Badge>
    </div>
  );

  return (
    <AppPage
      title="Contrast Checker"
      description="Test color combinations for WCAG 2.1 compliance"
    >
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Color Pickers */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Foreground Color</CardTitle>
              </CardHeader>
              <CardContent>
                <ColorPicker color={foreground} onChange={setForeground} />
              </CardContent>
            </Card>

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

            <Card>
              <CardHeader>
                <CardTitle>Background Color</CardTitle>
              </CardHeader>
              <CardContent>
                <ColorPicker color={background} onChange={setBackground} />
              </CardContent>
            </Card>
          </div>

          {/* Results */}
          <div className="space-y-6">
            {/* Preview */}
            <Card>
              <CardHeader>
                <CardTitle>Preview</CardTitle>
              </CardHeader>
              <CardContent>
                <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>
              </CardContent>
            </Card>

            {/* Contrast Ratio */}
            {ratio !== null && (
              <Card>
                <CardHeader>
                  <CardTitle>Contrast Ratio</CardTitle>
                </CardHeader>
                <CardContent>
                  <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>
                </CardContent>
              </Card>
            )}

            {/* WCAG Compliance */}
            {compliance && (
              <Card>
                <CardHeader>
                  <CardTitle>WCAG 2.1 Compliance</CardTitle>
                </CardHeader>
                <CardContent 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>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
    </AppPage>
  );
}