platform/src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/AIModels.tsx

import { useState, useEffect, useMemo } from 'react';
import { toast } from 'sonner';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useSettings } from 'state/useSettings';
import { useUserVisibleModels, getProviderDisplayName, type ModelOption } from 'state/useModels';

function buildGroups(models: ModelOption[]) {
  const groups: Record<string, { id: string; name: string }[]> = {};
  for (const m of models) {
    const provider = m.provider ?? 'Other';
    if (!groups[provider]) groups[provider] = [];
    groups[provider]!.push({ id: m.id, name: m.name });
  }
  return Object.entries(groups)
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
}

const NONE = '__none__';

export const AIModels = () => {
  const { settings, saveSettings } = useSettings();
  const piModels = useUserVisibleModels();
  const [isSaving, setIsSaving] = useState(false);

  const [chatModel, setChatModel] = useState<string | null>(settings.chat.defaultModel);
  const [projectModel, setProjectModel] = useState<string | null>(settings.chat.defaultProjectModel);
  const [taskModel, setTaskModel] = useState<string | null>(settings.tasks.defaultModel);

  useEffect(() => {
    setChatModel(settings.chat.defaultModel);
    setProjectModel(settings.chat.defaultProjectModel);
    setTaskModel(settings.tasks.defaultModel);
  }, [settings]);

  const groups = useMemo(() => buildGroups(piModels), [piModels]);

  const handleSave = async () => {
    if (isSaving) return;
    setIsSaving(true);
    try {
      await saveSettings({
        ...settings,
        chat: { ...settings.chat, defaultModel: chatModel, defaultProjectModel: projectModel },
        tasks: { ...settings.tasks, defaultModel: taskModel },
      });
      toast.success('AI model defaults saved');
    } catch {
      toast.error('Failed to save settings');
    } finally {
      setIsSaving(false);
    }
  };

  const renderModelSelect = (value: string | null, onChange: (v: string | null) => void, placeholder: string) => (
    <Select value={value ?? NONE} onValueChange={(v) => onChange(v === NONE ? null : v)}>
      <SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark">
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent className="z-[600] max-h-[300px]">
        <SelectItem value={NONE}>{placeholder}</SelectItem>
        {groups.map(({ provider, models }) => (
          <SelectGroup key={provider}>
            <SelectLabel>{getProviderDisplayName(provider)}</SelectLabel>
            {models.map((m) => (
              <SelectItem key={`${provider}:${m.id}`} value={m.id}>
                {m.name}
              </SelectItem>
            ))}
          </SelectGroup>
        ))}
      </SelectContent>
    </Select>
  );

  return (
    <div className="grid gap-5">
      <Label className="grid gap-2">
        <span className="text-duck-dark/70 dark:text-foreground/70">Default Chat Model</span>
        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
          Used when starting a new chat from the home screen
        </p>
        {renderModelSelect(chatModel, setChatModel, 'System default')}
      </Label>

      <Label className="grid gap-2">
        <span className="text-duck-dark/70 dark:text-foreground/70">Default Project Model</span>
        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
          Used when starting a new chat inside a project dashboard
        </p>
        {renderModelSelect(projectModel, setProjectModel, 'Same as chat default')}
      </Label>

      <Label className="grid gap-2">
        <span className="text-duck-dark/70 dark:text-foreground/70">Default Task Model</span>
        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
          Used when running tasks from the file browser
        </p>
        {renderModelSelect(taskModel, setTaskModel, 'Same as chat default')}
      </Label>

      <Button
        type="button"
        onClick={handleSave}
        disabled={isSaving}
        className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
      >
        {isSaving ? 'Saving...' : 'Save'}
      </Button>
    </div>
  );
};