zn-ai/src/pages/Agents/components/AddAgentDialog.tsx

import { useEffect, useState } from 'react';
import AgentsDialogSurface from './AgentsDialogSurface';

const INPUT_CLASS_NAME = [
  'h-[44px] w-full rounded-xl border border-black/10 bg-white px-7',
  'text-[22px] text-[#171717] outline-none transition-colors placeholder:text-[#9A958C]',
  'focus:border-black/20 dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500',
].join(' ');

type AddAgentDialogCopy = {
  title: string;
  subtitle: string;
  nameLabel: string;
  namePlaceholder: string;
  inheritWorkspaceLabel: string;
  inheritWorkspaceDescription: string;
  cancelLabel: string;
  saveLabel: string;
  savingLabel: string;
};

type AddAgentDialogProps = {
  open: boolean;
  saving: boolean;
  copy: AddAgentDialogCopy;
  onClose: () => void;
  onSave: (input: { name: string; inheritWorkspace: boolean }) => Promise<void> | void;
};

function Toggle({
  checked,
  disabled,
  onToggle,
}: {
  checked: boolean;
  disabled: boolean;
  onToggle: () => void;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={onToggle}
      className={[
        'relative inline-flex h-12 w-24 shrink-0 items-center rounded-full transition-colors',
        checked ? 'bg-[#DDE8FF]' : 'bg-[#E8E1D3]',
        disabled ? 'cursor-not-allowed opacity-60' : '',
      ].join(' ')}
    >
      <span
        className={[
          'absolute left-1.5 top-1.5 h-9 w-9 rounded-full bg-white shadow-[0_4px_12px_rgba(15,23,42,0.12)] transition-transform',
          checked ? 'translate-x-11' : '',
        ].join(' ')}
      />
    </button>
  );
}

export default function AddAgentDialog({
  open,
  saving,
  copy,
  onClose,
  onSave,
}: AddAgentDialogProps) {
  const [name, setName] = useState('');
  const [inheritWorkspace, setInheritWorkspace] = useState(false);

  useEffect(() => {
    if (!open) return;
    setName('');
    setInheritWorkspace(false);
  }, [open]);

  const canSave = name.trim().length > 0 && !saving;

  return (
    <AgentsDialogSurface
      open={open}
      onClose={onClose}
      title={copy.title}
      subtitle={copy.subtitle}
      widthClassName="max-w-[894px]"
    >
      <div className="space-y-10">
        <section>
          <label className="mb-4 block text-[22px] font-semibold text-[#2E3445] dark:text-[#f3f4f6]">
            {copy.nameLabel}
          </label>
          <input
            value={name}
            onChange={(event) => setName(event.target.value)}
            placeholder={copy.namePlaceholder}
            className={INPUT_CLASS_NAME}
            autoFocus
          />
        </section>

        <section className="flex items-center justify-between gap-8">
          <div className="min-w-0">
            <div className="text-[22px] font-semibold text-[#2E3445] dark:text-[#f3f4f6]">
              {copy.inheritWorkspaceLabel}
            </div>
            <p className="mt-2 max-w-[560px] text-[16px] leading-[1.6] text-[#646C7A] dark:text-gray-400">
              {copy.inheritWorkspaceDescription}
            </p>
          </div>

          <Toggle
            checked={inheritWorkspace}
            disabled={saving}
            onToggle={() => setInheritWorkspace((current) => !current)}
          />
        </section>

        <div className="flex justify-end gap-4 pt-2">
          <button
            type="button"
            className="rounded-full border border-black/12 bg-white/70 px-10 py-3 text-[18px] font-medium text-[#3B4252] transition-colors hover:bg-white dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
            onClick={onClose}
            disabled={saving}
          >
            {copy.cancelLabel}
          </button>
          <button
            type="button"
            className="rounded-full bg-[#7E9DF5] px-10 py-3 text-[18px] font-medium text-white transition-colors hover:bg-[#6E90F3] disabled:cursor-not-allowed disabled:opacity-60"
            disabled={!canSave}
            onClick={() => {
              void onSave({
                name: name.trim(),
                inheritWorkspace,
              });
            }}
          >
            {saving ? copy.savingLabel : copy.saveLabel}
          </button>
        </div>
      </div>
    </AgentsDialogSurface>
  );
}