// Brand Manager — workspace-scoped. Replaces the old single/agency
// per-user model. The active workspace is set via window.api (X-Workspace-Id
// header), and the plan determines whether new brands can be added (starter
// = 1 brand cap, agency = unlimited).
//
// Two tabs:
//   • Brands — list/edit brands in the active workspace
//   • Members — invite teammates by email, change role, remove

const { useState: useState_bm, useEffect: useEffect_bm } = React;

const INDUSTRY_OPTIONS = [
  'F&B — Coffee Shop',
  'F&B — Restoran',
  'F&B — Bakery',
  'Retail Fashion',
  'E-commerce',
  'Telco',
  'Banking / Fintech',
  'Health & Beauty',
  'Edukasi',
  'Lainnya',
];

function BrandForm({ initial, onCancel, onSave, busy, deletable, onDelete }) {
  const [f, setF] = useState_bm({
    name: initial?.name ?? '',
    description: initial?.description ?? '',
    targetAudience: initial?.targetAudience ?? '',
    usp: initial?.usp ?? '',
    brandVoice: initial?.brandVoice ?? '',
    category: initial?.category ?? '',
  });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div>
        <label className="label">Nama brand</label>
        <input className="input" value={f.name} onChange={(e) => set('name', e.target.value)} placeholder="cth. Kopi Kenanga" />
      </div>
      <div>
        <label className="label">Kategori industri</label>
        <select className="select" value={f.category} onChange={(e) => set('category', e.target.value)}>
          <option value="">Pilih kategori…</option>
          {INDUSTRY_OPTIONS.map((c) => <option key={c}>{c}</option>)}
        </select>
      </div>
      <div>
        <label className="label">Deskripsi singkat <span style={{ color: 'var(--ink-4)', fontWeight: 400 }}>(1–2 kalimat — apa & untuk siapa)</span></label>
        <textarea className="textarea" rows={2} value={f.description} onChange={(e) => set('description', e.target.value)}
          placeholder="cth. Coffee shop lokal Surabaya yang fokus pada kopi specialty Indonesia dengan harga UMKM-friendly." />
      </div>
      <div>
        <label className="label">Target audience</label>
        <input className="input" value={f.targetAudience} onChange={(e) => set('targetAudience', e.target.value)}
          placeholder="cth. Mahasiswa & pekerja muda 18–28, urban, harga sensitif" />
      </div>
      <div>
        <label className="label">USP / Nilai pembeda</label>
        <input className="input" value={f.usp} onChange={(e) => set('usp', e.target.value)}
          placeholder="cth. Biji single-origin Aceh, harga di bawah Rp 20rb" />
      </div>
      <div>
        <label className="label">Brand voice <span style={{ color: 'var(--ink-4)', fontWeight: 400 }}>(opsional)</span></label>
        <input className="input" value={f.brandVoice} onChange={(e) => set('brandVoice', e.target.value)}
          placeholder="cth. Hangat, santai, gaul tapi sopan" />
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
        <button className="btn btn-primary" disabled={busy || !f.name.trim()} onClick={() => onSave(f)}>
          {busy ? 'Menyimpan…' : 'Simpan'}
        </button>
        {onCancel && <button className="btn btn-ghost" onClick={onCancel} disabled={busy}>Batal</button>}
        {deletable && onDelete && (
          <button
            className="btn btn-ghost"
            style={{ marginLeft: 'auto', color: 'var(--danger)' }}
            onClick={() => {
              if (window.confirm(`Hapus brand "${initial.name}"? Campaigns yang terhubung akan dipindah ke brand lain.`)) {
                onDelete();
              }
            }}
            disabled={busy}
          >
            Hapus brand
          </button>
        )}
      </div>
    </div>
  );
}

function BrandCard({ brand, canEdit, onEdit, onMakePrimary, onDelete, canDelete }) {
  return (
    <div className="card" style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9,
            background: 'linear-gradient(135deg, var(--primary), oklch(0.62 0.20 290))',
            color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14,
          }}>{(brand.name || '?').slice(0, 1).toUpperCase()}</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>{brand.name}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{brand.category || 'Tanpa kategori'}</div>
          </div>
        </div>
        {brand.isPrimary ? (
          <span className="badge badge-primary" style={{ fontSize: 10.5 }}>Utama</span>
        ) : canEdit ? (
          <button className="btn btn-ghost" style={{ padding: '6px 10px', fontSize: 12 }} onClick={onMakePrimary}>
            Jadikan utama
          </button>
        ) : null}
      </div>
      {brand.description && (
        <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{brand.description}</div>
      )}
      <div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--ink-3)', flexWrap: 'wrap' }}>
        {brand.targetAudience && <span><b style={{ color: 'var(--ink-2)', fontWeight: 600 }}>Audience:</b> {brand.targetAudience}</span>}
        {brand.usp && <span><b style={{ color: 'var(--ink-2)', fontWeight: 600 }}>USP:</b> {brand.usp}</span>}
      </div>
      {canEdit && (
        <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
          <button className="btn btn-soft" onClick={onEdit}>Edit</button>
          {canDelete && (
            <button className="btn btn-ghost" style={{ color: 'var(--danger)' }} onClick={onDelete}>Hapus</button>
          )}
        </div>
      )}
    </div>
  );
}

// ─── Members tab ────────────────────────────────────────────────────────
function MembersPanel({ workspace, isOwner, onChange }) {
  const [members, setMembers] = useState_bm([]);
  const [loading, setLoading] = useState_bm(true);
  const [inviteEmail, setInviteEmail] = useState_bm('');
  const [inviteRole, setInviteRole] = useState_bm('member');
  const [busy, setBusy] = useState_bm(false);
  const [error, setError] = useState_bm(null);

  async function refresh() {
    setLoading(true);
    try {
      const { members } = await window.api.listMembers(workspace.id);
      setMembers(members);
    } finally {
      setLoading(false);
    }
  }

  useEffect_bm(() => { refresh(); }, [workspace.id]);

  async function handleInvite(e) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    try {
      await window.api.inviteMember(workspace.id, { email: inviteEmail, role: inviteRole });
      setInviteEmail('');
      await refresh();
      onChange?.();
    } catch (e) {
      setError(e.message);
    } finally {
      setBusy(false);
    }
  }

  async function changeRole(m, role) {
    setError(null);
    try {
      await window.api.updateMemberRole(workspace.id, m.id, role);
      await refresh();
    } catch (e) { setError(e.message); }
  }

  async function remove(m) {
    if (!window.confirm(`Hapus ${m.email} dari workspace?`)) return;
    setError(null);
    try {
      await window.api.removeMember(workspace.id, m.id);
      await refresh();
      onChange?.();
    } catch (e) { setError(e.message); }
  }

  if (loading) return <div style={{ padding: 16, color: 'var(--ink-3)' }}>Memuat member…</div>;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {isOwner && (
        <div className="card" style={{ padding: 18 }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Invite teman ke workspace</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginBottom: 12 }}>
            User harus sudah daftar Survey TOM. Member bisa lihat & buat campaign; owner kelola brand & member.
          </div>
          <form onSubmit={handleInvite} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
            <div style={{ flex: 1 }}>
              <label className="label">Email</label>
              <input className="input" type="email" value={inviteEmail}
                onChange={(e) => setInviteEmail(e.target.value)}
                placeholder="teman@brand.com" required />
            </div>
            <div style={{ width: 140 }}>
              <label className="label">Role</label>
              <select className="select" value={inviteRole} onChange={(e) => setInviteRole(e.target.value)}>
                <option value="member">Member</option>
                <option value="owner">Owner</option>
              </select>
            </div>
            <button className="btn btn-primary" disabled={busy || !inviteEmail.trim()}>
              {busy ? 'Mengirim…' : 'Invite'}
            </button>
          </form>
          {error && (
            <div style={{ marginTop: 10, fontSize: 12.5, color: 'var(--danger)', background: 'var(--danger-soft)', padding: '8px 10px', borderRadius: 6 }}>
              {error}
            </div>
          )}
        </div>
      )}

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{members.length} member</div>
        </div>
        {members.map((m) => (
          <div key={m.id} style={{
            padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 12,
            borderBottom: '1px solid var(--line)',
          }}>
            <Avatar src={m.image} name={m.name || m.email} seed={m.userId} size={32} radius={'50%'} fontSize={12} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{m.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{m.email}</div>
            </div>
            {isOwner ? (
              <select className="select" style={{ width: 120, padding: '6px 8px', fontSize: 12.5 }}
                value={m.role} onChange={(e) => changeRole(m, e.target.value)}>
                <option value="member">Member</option>
                <option value="owner">Owner</option>
              </select>
            ) : (
              <span className="badge" style={{ fontSize: 11 }}>{m.role}</span>
            )}
            {(isOwner || m.userId === window.__currentUserId) && (
              <button className="btn btn-ghost" style={{ color: 'var(--danger)', padding: '6px 10px', fontSize: 12 }}
                onClick={() => remove(m)}>
                {m.userId === window.__currentUserId ? 'Keluar' : 'Hapus'}
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Brand Manager ──────────────────────────────────────────────────────
function BrandManager({ user, activeWorkspace, initialTab = 'brands', onWorkspacesChange }) {
  const [tab, setTab] = useState_bm(initialTab);
  const [brandList, setBrandList] = useState_bm([]);
  const [loading, setLoading] = useState_bm(true);
  const [editing, setEditing] = useState_bm(null);
  const [busy, setBusy] = useState_bm(false);
  const [error, setError] = useState_bm(null);

  // Stash current user id so MembersPanel can detect "self".
  React.useEffect(() => { window.__currentUserId = user?.id; }, [user?.id]);

  const isOwner = activeWorkspace?.role === 'owner';
  const plan = activeWorkspace?.plan ?? 'starter';
  const isAgency = plan === 'agency';

  async function refresh() {
    setLoading(true);
    try {
      const { brands } = await window.api.listBrands();
      setBrandList(brands);
    } finally {
      setLoading(false);
    }
  }
  useEffect_bm(() => { refresh(); }, [activeWorkspace?.id]);

  async function handleSave(form) {
    setBusy(true); setError(null);
    try {
      if (editing === 'new') await window.api.createBrand(form);
      else await window.api.updateBrand(editing.id, form);
      setEditing(null);
      await refresh();
    } catch (e) { setError(e.message); }
    finally { setBusy(false); }
  }

  async function handleDelete(brand) {
    setBusy(true); setError(null);
    try {
      await window.api.deleteBrand(brand.id);
      setEditing(null);
      await refresh();
    } catch (e) { setError(e.message); }
    finally { setBusy(false); }
  }

  async function makePrimary(brand) {
    await window.api.updateBrand(brand.id, { isPrimary: true });
    await refresh();
  }

  async function upgradePlan() {
    if (!isOwner) return;
    setBusy(true); setError(null);
    try {
      await window.api.updateWorkspace(activeWorkspace.id, { plan: 'agency' });
      onWorkspacesChange?.();
    } catch (e) { setError(e.message); }
    finally { setBusy(false); }
  }

  if (!activeWorkspace) {
    return <div style={{ padding: 32, color: 'var(--ink-3)' }}>Memuat workspace…</div>;
  }

  return (
    <div style={{ padding: '24px 32px', maxWidth: 1100 }}>
      {/* Page header — workspace name & plan editing now lives in Pengaturan. */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18, gap: 16 }}>
        <div>
          <h1 style={{ fontSize: 22, fontWeight: 700, margin: '0 0 4px' }}>
            {tab === 'brands' ? 'Brands' : 'Members'}
          </h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>
            {tab === 'brands'
              ? (isAgency
                  ? 'Brand-brand di workspace ini. Setiap campaign memilih brand mana yang sedang diteliti.'
                  : 'Profil brand utama workspace ini. AI memakai info ini untuk menyusun pertanyaan & insight.')
              : 'Anggota workspace ini. Owner bisa invite dan kelola role.'}
          </div>
        </div>
        {isOwner && tab === 'brands' && isAgency && (
          <button className="btn btn-primary" onClick={() => setEditing('new')}>
            <I.Plus size={14} /> Tambah brand
          </button>
        )}
      </div>

      {/* Tabs */}
      <div className="tabs" style={{ marginBottom: 18 }}>
        <button className={`tab ${tab === 'brands' ? 'active' : ''}`} onClick={() => setTab('brands')}>Brands</button>
        <button className={`tab ${tab === 'members' ? 'active' : ''}`} onClick={() => setTab('members')}>Members</button>
      </div>

      {/* Plan upgrade prompt — only on Brands tab when starter, owner. */}
      {isOwner && tab === 'brands' && !isAgency && (
        <div style={{
          padding: '12px 14px', marginBottom: 14,
          background: 'var(--primary-50)', border: '1px solid var(--primary-100)',
          borderRadius: 10, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <I.Sparkle size={16} style={{ color: 'var(--primary)', flexShrink: 0 }} />
          <div style={{ flex: 1, fontSize: 13 }}>
            Workspace ini di plan <b>starter</b> — terbatas 1 brand. Upgrade ke <b>agency</b> untuk kelola banyak brand.
          </div>
          <button className="btn btn-primary" onClick={upgradePlan} disabled={busy} style={{ padding: '6px 12px', fontSize: 12.5 }}>
            {busy ? 'Memproses…' : 'Upgrade'}
          </button>
        </div>
      )}

      {error && (
        <div style={{ fontSize: 13, color: 'var(--danger)', background: 'var(--danger-soft)', padding: '10px 12px', borderRadius: 8, marginBottom: 14 }}>
          {error}
        </div>
      )}

      {tab === 'brands' && (loading ? (
        <div style={{ padding: 16, color: 'var(--ink-3)' }}>Memuat brand…</div>
      ) : (
        <>
          {editing && isOwner && (
            <div className="card" style={{ padding: 22, marginBottom: 16 }}>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>
                {editing === 'new' ? 'Tambah brand baru' : `Edit ${editing.name}`}
              </div>
              <BrandForm
                initial={editing === 'new' ? null : editing}
                busy={busy}
                onSave={handleSave}
                onCancel={() => setEditing(null)}
                deletable={editing !== 'new' && brandList.length > 1}
                onDelete={() => handleDelete(editing)}
              />
            </div>
          )}

          {brandList.length === 1 && !editing ? (
            // Single brand: render as inline editor for quick edits (starter UX).
            <div className="card" style={{ padding: 22 }}>
              {isOwner ? (
                <BrandForm
                  initial={brandList[0]}
                  busy={busy}
                  onSave={async (form) => {
                    setBusy(true);
                    try {
                      await window.api.updateBrand(brandList[0].id, form);
                      await refresh();
                    } catch (e) { setError(e.message); }
                    finally { setBusy(false); }
                  }}
                />
              ) : (
                <BrandCard brand={brandList[0]} canEdit={false} />
              )}
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 14 }}>
              {brandList.map((b) => (
                <BrandCard
                  key={b.id}
                  brand={b}
                  canEdit={isOwner}
                  onEdit={() => setEditing(b)}
                  onMakePrimary={() => makePrimary(b)}
                  onDelete={() => { if (window.confirm(`Hapus brand "${b.name}"?`)) handleDelete(b); }}
                  canDelete={brandList.length > 1}
                />
              ))}
            </div>
          )}
        </>
      ))}

      {tab === 'members' && (
        <MembersPanel workspace={activeWorkspace} isOwner={isOwner} onChange={onWorkspacesChange} />
      )}
    </div>
  );
}

Object.assign(window, { BrandManager });