import { useUserConfig, useUpdateAccessibility } from "./hooks";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

const colorBlindModes = [
  { value: "none", label: "None" },
  { value: "protanopia", label: "Protanopia (red-blind)" },
  { value: "deuteranopia", label: "Deuteranopia (green-blind)" },
  { value: "tritanopia", label: "Tritanopia (blue-blind)" },
];

export default function SettingsAccessibilityPage() {
  const { data: config, isLoading } = useUserConfig();
  const update = useUpdateAccessibility();
  const accessibility = config?.accessibility;
  const fontScale = accessibility?.font_scale_percent ?? 100;

  return (
    <div className="px-8 py-10">
      <h1 className="text-xl font-heading font-bold text-foreground">Accessibility</h1>
      <p className="mt-1 text-sm text-muted-foreground">Adjust the interface for your needs</p>

      {isLoading ? (
        <div className="mt-8 space-y-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div className="h-12 animate-pulse rounded-lg bg-muted" key={i} />
          ))}
        </div>
      ) : (
        <div className="mt-8 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Font scale</CardTitle>
              <CardDescription>Adjust text size across the interface ({fontScale}%)</CardDescription>
            </CardHeader>
            <CardContent>
              <Slider
                min={75}
                max={150}
                step={5}
                value={[fontScale]}
                onValueChange={(v) => {
                  const scale = typeof v === "number" ? v : (v as number[])[0];
                  update.mutate({ font_scale_percent: scale });
                }}
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Color blind mode</CardTitle>
              <CardDescription>Adjust colors for various types of color vision deficiency</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={accessibility?.color_blind_mode ?? "none"}
                onValueChange={(v) => update.mutate({ color_blind_mode: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {colorBlindModes.map((m) => (
                    <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Display adjustments</CardTitle>
              <CardDescription>Additional visual and interaction settings</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>High contrast</Label>
                  <Switch
                    checked={accessibility?.high_contrast ?? false}
                    onCheckedChange={(v) => update.mutate({ high_contrast: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Reduce motion</Label>
                  <Switch
                    checked={accessibility?.reduce_motion ?? false}
                    onCheckedChange={(v) => update.mutate({ reduce_motion: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Screen reader optimized</Label>
                  <Switch
                    checked={accessibility?.screen_reader_optimized ?? false}
                    onCheckedChange={(v) => update.mutate({ screen_reader_optimized: v })}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}