import type { ReactNode } from "react";
import type {
  ControllerRenderProps,
  FieldError as RhfFieldError,
} from "react-hook-form";
import {
  AlertTriangle,
  Check,
  CheckCircle2,
  Info,
  XCircle,
} from "lucide-react";
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@edr/ui-common";
import type { BookingFormInputValues, BookingFormValues } from "./schema";
import { cn } from "@/lib/utils";

export function OptionFieldError({ error }: { error?: { message?: string } }) {
  return <FieldError errors={[error]} />;
}

export function OptionCard({
  selected,
  onClick,
  disabled,
  children,
}: {
  selected: boolean;
  onClick?: () => void;
  disabled?: boolean;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${disabled
          ? "cursor-not-allowed border-border bg-muted opacity-60"
          : selected
            ? "border-primary bg-primary/5"
            : "border-border bg-card hover:border-primary/40"
        }`}
    >
      {selected && !disabled && (
        <span className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
          <Check className="h-3 w-3 text-primary-foreground" />
        </span>
      )}
      {children}
    </button>
  );
}

export function AlertBox({
  tone,
  children,
}: {
  tone: "warning" | "error" | "success" | "info";
  children: ReactNode;
}) {
  const styles = {
    warning: "bg-amber-50 border-amber-200 text-amber-800",
    error: "bg-red-50 border-red-200 text-red-800",
    success: "bg-emerald-50 border-emerald-200 text-emerald-800",
    info: "bg-sky-50 border-sky-200 text-sky-800",
  };
  const icons = {
    warning: <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />,
    error: <XCircle className="h-4 w-4 shrink-0 text-red-500" />,
    success: <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />,
    info: <Info className="h-4 w-4 shrink-0 text-sky-500" />,
  };

  return (
    <div
      className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${styles[tone]}`}
    >
      {icons[tone]}
      <div>{children}</div>
    </div>
  );
}

export function StepLabel({ children }: { children: ReactNode }) {
  return (
    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
      {children}
    </p>
  );
}

export function StepHeader({
  title,
  description,
}: {
  title: string;
  description: string;
}) {
  return (
    <div>
      <h2 className="text-xl font-bold tracking-tight">{title}</h2>
      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

export function SelectField({
  field,
  error,
  label,
  placeholder,
  disabled,
  children,
}: {
  field: ControllerRenderProps<BookingFormInputValues>;
  error?: RhfFieldError;
  label: string;
  placeholder: string;
  disabled?: boolean;
  children: ReactNode;
}) {
  return (
    <Field data-invalid={Boolean(error)}>
      <FieldLabel>{label}</FieldLabel>
      <Select
        value={String(field.value)}
        onValueChange={field.onChange}
        disabled={disabled}
      >
        <SelectTrigger
          className={cn("w-full ", error ? "border-destructive!" : "")}
          aria-invalid={Boolean(error)}
        >
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>{children}</SelectContent>
      </Select>
      <FieldError errors={[error]} />
    </Field>
  );
}

export { SelectItem };

export function SelectOptions({ options }: { options: readonly string[] }) {
  return (
    <>
      {options.map((option) => (
        <SelectItem key={option} value={option}>
          {option}
        </SelectItem>
      ))}
    </>
  );
}
