import { SlidersHorizontal } from "@phosphor-icons/react";
import { Switch } from "../selection/switch";
import { cn } from "../../lib/cn";

export type AIFeatureConfig = {
  showAttachments: boolean;
  showMentions: boolean;
  showMessageActions: boolean;
  showModels: boolean;
  showQueue: boolean;
  showTasks: boolean;
  showTimestamps: boolean;
  showToolCalls: boolean;
  showVoice: boolean;
};

export const defaultAIFeatureConfig: AIFeatureConfig = {
  showAttachments: true,
  showMentions: true,
  showMessageActions: true,
  showModels: true,
  showQueue: true,
  showTasks: true,
  showTimestamps: true,
  showToolCalls: true,
  showVoice: false,
};

export type AIFeaturePanelProps = {
  className?: string;
  onChange?: (config: AIFeatureConfig) => void;
  title?: string;
  value?: Partial<AIFeatureConfig>;
};

const featureLabels: { key: keyof AIFeatureConfig; label: string }[] = [
  { key: "showAttachments", label: "Attachments" },
  { key: "showMentions", label: "Mentions" },
  { key: "showTasks", label: "Task modes" },
  { key: "showModels", label: "Model selector" },
  { key: "showVoice", label: "Voice input" },
  { key: "showQueue", label: "Queue steering" },
  { key: "showMessageActions", label: "Message actions" },
  { key: "showToolCalls", label: "Tool calls" },
  { key: "showTimestamps", label: "Message timestamps" },
];

export function AIFeaturePanel({
  className,
  onChange,
  title = "AI features",
  value,
}: AIFeaturePanelProps) {
  const config = { ...defaultAIFeatureConfig, ...value };

  function update(key: keyof AIFeatureConfig, checked: boolean) {
    onChange?.({ ...config, [key]: checked });
  }

  return (
    <section className={cn("rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-4", className)}>
      <div className="mb-4 flex items-start gap-3">
        <span className="grid h-9 w-9 shrink-0 place-items-center rounded-[var(--uhuru-radius-sm)] bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-secondary)]"><SlidersHorizontal size={18} /></span>
        <div className="min-w-0"><h2 className="font-medium text-[var(--uhuru-text-primary)]">{title}</h2><p className="mt-1 text-xs text-[var(--uhuru-text-tertiary)]">Toggle experimental AI composer and conversation features independently.</p></div>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        {featureLabels.map((feature) => <Switch checked={config[feature.key]} key={feature.key} label={feature.label} onChange={(checked) => update(feature.key, checked)} />)}
      </div>
    </section>
  );
}