import { useState, type ReactNode } from "react";
import { RotateCcw } from "lucide-react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "./card";
import {
  Accordion,
  AccordionItem,
  AccordionContent,
  AccordionTrigger,
} from "./accordion";
import { Button } from "./button";
import { TemplateGrid } from "./template-grid";
import { ProIndicator } from "@/components/pro/pro-indicator";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "./alert-dialog";

export const APPEARANCE_GRID =
  "grid min-w-0 grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]";
export const APPEARANCE_FIELD_ROW =
  "grid min-w-0 grid-cols-[minmax(0,1fr)_min(60%,15rem)] items-center gap-4";

export function AppearanceChoices({
  value,
  options,
  onChange,
  label = "Design choices",
}: {
  value: string;
  options: { value: string; label: string; icon?: ReactNode }[];
  onChange: (value: string) => void;
  label?: string;
}) {
  return (
    <div
      role="group"
      aria-label={label}
      className="inline-flex max-w-full flex-wrap gap-1 rounded-lg bg-muted p-1"
    >
      {options.map((option) => (
        <Button
          key={option.value}
          type="button"
          variant="ghost"
          size="sm"
          aria-pressed={value === option.value}
          onClick={() => onChange(option.value)}
          className={`h-8 gap-1.5 text-xs ${value === option.value ? "bg-background text-primary shadow-sm hover:bg-background" : "text-muted-foreground"}`}
        >
          {option.icon}
          {option.label}
        </Button>
      ))}
    </div>
  );
}

export function AppearanceSection({
  id,
  title,
  summary,
  pro = false,
  children,
}: {
  id: string;
  title: string;
  summary?: string;
  pro?: boolean;
  children: ReactNode;
}) {
  return (
    <AccordionItem value={id} className="border-t border-b-0">
      <AccordionTrigger className="gap-3 py-4 text-left hover:no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40">
        <span className="min-w-0 flex-1">
          <span className="flex items-center gap-2 font-medium">
            {title}
            {pro && (
              <>
                <ProIndicator size="sm" />
                <span className="sr-only"> (Pro)</span>
              </>
            )}
          </span>
          {summary && (
            <span className="mt-1 block text-xs font-normal text-muted-foreground">
              {summary}
            </span>
          )}
        </span>
      </AccordionTrigger>
      <AccordionContent className="pb-5">
        <div className="space-y-5 rounded-lg bg-muted/30 p-4">{children}</div>
      </AccordionContent>
    </AccordionItem>
  );
}

function ReplacementDialog({
  open,
  onClose,
  onApply,
  name,
}: {
  open: boolean;
  onClose: () => void;
  onApply: () => void;
  name: string;
}) {
  return (
    <AlertDialog
      open={open}
      onOpenChange={(value) => {
        if (!value) onClose();
      }}
    >
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Replace this design?</AlertDialogTitle>
          <AlertDialogDescription>
            Applying {name} replaces the affected draft appearance values,
            including manual adjustments. Other feature settings stay unchanged.
            Nothing is saved until you select Save Changes.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Keep current design</AlertDialogCancel>
          <AlertDialogAction onClick={onApply}>Apply design</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

export function AppearanceControls({
  children,
  onReset,
}: {
  children: ReactNode;
  onReset?: () => void;
}) {
  const [confirmReset, setConfirmReset] = useState(false);
  return (
    <Card className="min-w-0 shadow-none">
      <CardHeader className="flex flex-row flex-wrap items-start justify-between gap-3 space-y-0">
        <div className="space-y-1.5">
          <CardTitle role="heading" aria-level={2}>
            Design controls
          </CardTitle>
          <CardDescription>
            Adjust the appearance of this feature.
          </CardDescription>
        </div>
        {onReset && (
          <Button
            type="button"
            variant="outline"
            size="sm"
            aria-label="Reset design"
            onClick={() => setConfirmReset(true)}
          >
            <RotateCcw aria-hidden="true" className="mr-2 h-4 w-4" />
            Reset design
          </Button>
        )}
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible>
          {children}
        </Accordion>
      </CardContent>
      <ReplacementDialog
        open={confirmReset}
        onClose={() => setConfirmReset(false)}
        name="the default design"
        onApply={() => {
          onReset?.();
          setConfirmReset(false);
        }}
      />
    </Card>
  );
}

export interface AppearancePreset<T> {
  id: string;
  name: string;
  description: string;
  values: Partial<T>;
  isPro?: boolean;
}
export function matchesAppearance<T extends object>(
  current: T,
  expected: Partial<T>,
) {
  const normalize = (value: unknown) =>
    typeof value === "string" && value.startsWith("#")
      ? value.toLowerCase()
      : value === "inherit"
        ? ""
        : value;
  return (Object.keys(expected) as (keyof T)[]).every(
    (key) => normalize(current[key]) === normalize(expected[key]),
  );
}

export function AppearancePresets<T extends object>({
  feature,
  current,
  presets,
  baseValues,
  onApply,
  isPro = false,
}: {
  feature: string;
  current: T;
  presets: AppearancePreset<T>[];
  baseValues?: Partial<T>;
  onApply: (values: Partial<T>) => void;
  isPro?: boolean;
}) {
  const [pending, setPending] = useState<string | null>(null);
  const visible = presets.filter((preset) => !preset.isPro || isPro);
  const values = (preset: AppearancePreset<T>) => ({
    ...baseValues,
    ...preset.values,
  });
  const selected = visible.find((preset) =>
    matchesAppearance(current, values(preset)),
  );
  const pendingPreset = visible.find((preset) => preset.id === pending);
  return (
    <Card className="min-w-0 shadow-none">
      <CardHeader>
        <CardTitle role="heading" aria-level={2}>
          Design presets
        </CardTitle>
        <CardDescription>
          Choose a starting point, then fine-tune the controls below.
        </CardDescription>
        <p role="status" aria-live="polite" className="text-sm font-medium">
          Current design: {selected?.name || "Customized"}
        </p>
      </CardHeader>
      <CardContent>
        <TemplateGrid
          templates={visible}
          columns={3}
          size="sm"
          className="grid-cols-1 sm:grid-cols-3"
          isPro={isPro}
          selectionLabel={`${feature} design presets`}
          selectedId={selected?.id || ""}
          onSelect={(id) => {
            const preset = visible.find((item) => item.id === id);
            if (!preset || selected?.id === id) return;
            if (!selected) setPending(id);
            else onApply(values(preset));
          }}
        />
      </CardContent>
      <ReplacementDialog
        open={!!pendingPreset}
        onClose={() => setPending(null)}
        name={pendingPreset?.name || "this preset"}
        onApply={() => {
          if (pendingPreset) onApply(values(pendingPreset));
          setPending(null);
        }}
      />
    </Card>
  );
}