// Settings — tabs: Profile, Organization, Telegram, Danger zone.
const { useState: useStateSt } = React;

function Settings({ user, org, onChangeOrg, onLogout, onDeleteOrg, initialTab = 'profile' }) {
  const { Button, IconButton, Card, TextInput, SectionHead, Modal } = window.UI;
  const I = window.Icons;

  const [tab, setTab] = useStateSt(initialTab);
  const [deleteOpen, setDeleteOpen] = useStateSt(false);
  const [confirm, setConfirm] = useStateSt('');
  const [tgConnected, setTgConnected] = useStateSt(false);

  const TABS = [
    { id: 'profile', label: 'Профиль', icon: 'Building' },
    { id: 'org', label: 'Организация', icon: 'Layers' },
    { id: 'telegram', label: 'Telegram', icon: 'Telegram' },
    { id: 'danger', label: 'Опасная зона', icon: 'AlertTriangle' },
  ];

  return (
    <div className="max-w-[1100px] mx-auto px-5 sm:px-8 py-8">
      <SectionHead kicker="настройки" title="Управление аккаунтом" sub="Ваш профиль, организация, интеграции."/>

      <div className="flex gap-1 mb-7 overflow-x-auto no-scrollbar border-b border-ink-200">
        {TABS.map((t) => {
          const Icon = I[t.icon];
          const active = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} className={'flex items-center gap-2 px-3 h-10 text-[13.5px] font-medium border-b-2 -mb-px ' + (active ? 'border-ink-900 text-ink-900' : 'border-transparent text-ink-500 hover:text-ink-900')}>
              <Icon size={14}/> {t.label}
            </button>
          );
        })}
      </div>

      {tab === 'profile' && (
        <div className="grid lg:grid-cols-[1.2fr_1fr] gap-8 fade-in">
          <Card className="p-6">
            <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-4">аккаунт</div>
            <div className="space-y-5 max-w-md">
              <Field label="Имя">
                <TextInput value={user.name || ''} onChange={() => {}} placeholder="Анна Котова"/>
              </Field>
              <Field label="Email">
                <TextInput value={user.email} onChange={() => {}} disabled/>
                <div className="text-[11.5px] text-ink-500 mt-1.5">Меняется через подтверждение по почте.</div>
              </Field>
              <Field label="Язык интерфейса">
                <div className="flex gap-2">
                  <window.UI.Pill active>Русский</window.UI.Pill>
                  <window.UI.Pill>English</window.UI.Pill>
                </div>
              </Field>
            </div>
          </Card>
          <Card className="p-6">
            <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-4">сессии</div>
            <div className="space-y-3">
              {[
                { d: 'macOS · Safari', loc: 'Москва · сейчас', cur: true },
                { d: 'iOS · Safari', loc: 'Москва · 2 ч назад', cur: false },
              ].map((s, i) => (
                <div key={i} className="flex items-center justify-between p-3 rounded-xl bg-ink-50">
                  <div>
                    <div className="text-[13.5px] font-medium">{s.d} {s.cur && <span className="ml-1.5 text-[10.5px] uppercase tracking-wide font-semibold text-emerald-700">текущая</span>}</div>
                    <div className="text-[11.5px] text-ink-500">{s.loc}</div>
                  </div>
                  {!s.cur && <Button size="sm" variant="ghost">Выйти</Button>}
                </div>
              ))}
            </div>
            <Button variant="outline" size="sm" icon={<I.Logout size={13}/>} className="mt-5" onClick={onLogout}>Выйти отсюда</Button>
          </Card>
        </div>
      )}

      {tab === 'org' && (
        <Card className="p-6 max-w-2xl fade-in">
          <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-4">организация</div>
          <div className="space-y-5">
            <Field label="Название">
              <TextInput value={org.name} onChange={(v) => onChangeOrg({ ...org, name: v })}/>
            </Field>
            <Field label="Slug">
              <div className="flex items-center gap-2">
                <span className="font-mono text-[13px] text-ink-500">omneee.app/</span>
                <TextInput value={org.slug} onChange={(v) => onChangeOrg({ ...org, slug: v })} className="flex-1"/>
              </div>
            </Field>
            <Field label="Участники">
              <div className="flex items-center gap-3 rounded-xl bg-ink-50 p-3">
                <window.UI.Avatar initial={(user.email[0] || 'U').toUpperCase()} color="#0F0F0F" size={32}/>
                <div className="flex-1 text-[13px]">
                  <div className="font-medium">{user.email}</div>
                  <div className="text-[11.5px] text-ink-500">Владелец · единственный участник</div>
                </div>
                <Button size="sm" variant="outline" disabled>Пригласить · скоро</Button>
              </div>
            </Field>
          </div>
        </Card>
      )}

      {tab === 'telegram' && (
        <div className="grid lg:grid-cols-[1.1fr_1fr] gap-8 fade-in">
          <Card className="p-6">
            <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-4">бот для уведомлений</div>
            <div className="flex items-start gap-4">
              <div className="h-12 w-12 rounded-xl bg-[#229ED9] text-white flex items-center justify-center shrink-0"><I.Telegram size={20}/></div>
              <div>
                <div className="text-[16px] font-semibold">@omneee_bot</div>
                <div className="text-[12.5px] text-ink-500 mt-1">Будет писать «пост готов», когда генерация закончится.</div>
              </div>
            </div>
            <div className="mt-6 rounded-xl bg-ink-50 border border-ink-200 p-4">
              <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-2">Как подключить</div>
              <ol className="space-y-2 text-[13px] text-ink-700 list-decimal pl-5">
                <li>Открыть <span className="font-mono text-ink-900">t.me/omneee_bot</span></li>
                <li>Нажать <span className="font-mono text-ink-900">/start</span></li>
                <li>Ввести код подключения <span className="font-mono bg-white px-1.5 py-0.5 rounded ml-1">A1F-29X</span></li>
              </ol>
            </div>
            <div className="mt-5 flex items-center gap-2">
              <Button icon={<I.Telegram size={14}/>} onClick={() => setTgConnected(true)}>{tgConnected ? 'Переподключить' : 'Открыть бота'}</Button>
              {tgConnected && <span className="text-[12.5px] text-emerald-700 font-medium flex items-center gap-1"><I.Check size={13} strokeWidth={2.5}/> подключено</span>}
            </div>
          </Card>

          <Card className="p-6">
            <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-4">уведомления</div>
            <ul className="space-y-3 text-[13px]">
              {[
                ['Пост готов', true],
                ['Найдены новые источники', true],
                ['Идея переведена в работу', false],
                ['Еженедельный дайджест', true],
              ].map(([l, on], i) => (
                <li key={i} className="flex items-center justify-between">
                  <span>{l}</span>
                  <window.UI.Toggle on={on} onChange={() => {}} size="sm"/>
                </li>
              ))}
            </ul>
          </Card>
        </div>
      )}

      {tab === 'danger' && (
        <Card className="p-6 max-w-2xl border-red-200 fade-in">
          <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-red-700 mb-1">опасная зона</div>
          <div className="text-[18px] font-semibold tracking-tight">Удалить организацию</div>
          <p className="text-[13.5px] text-ink-600 mt-2 leading-relaxed">
            Все источники, идеи, посты и брендбук этой организации будут удалены безвозвратно. Это не повлияет на другие организации в вашем аккаунте.
          </p>
          <div className="mt-5">
            <Button variant="danger" icon={<I.Trash size={14}/>} onClick={() => setDeleteOpen(true)}>Удалить «{org.name}»</Button>
          </div>
        </Card>
      )}

      <Modal open={deleteOpen} onClose={() => setDeleteOpen(false)} title="Удалить организацию?" sub="Это действие нельзя отменить.">
        <div className="space-y-4">
          <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-[13px] text-red-800">
            Будет удалено: 1 брендбук · {/* mock counts */} 12 постов · 8 идей · 5 источников.
          </div>
          <div>
            <div className="text-[12px] text-ink-500 mb-1.5">Введите <span className="font-mono text-ink-900">{org.slug}</span> для подтверждения</div>
            <TextInput value={confirm} onChange={setConfirm} placeholder={org.slug}/>
          </div>
          <div className="flex items-center justify-end gap-2">
            <Button variant="ghost" onClick={() => setDeleteOpen(false)}>Отмена</Button>
            <Button variant="danger" disabled={confirm !== org.slug} onClick={() => { setDeleteOpen(false); onDeleteOrg(); }}>Удалить навсегда</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div className="text-[12.5px] font-medium text-ink-700 mb-1.5">{label}</div>
      {children}
    </div>
  );
}

window.Screens = window.Screens || {};
window.Screens.Settings = Settings;