// Drawer — creator detail panel with tabs.
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

function CreatorDrawer({ creator, onClose, onChange }) {
  const [tab, setTab] = useStateD("overview");

  useEffectD(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (!creator) return null;
  const meta = STATUS_META[creator.status];
  const platMeta = PLATFORM_META[creator.platform];

  return (
    <>
      <div className="drawer-overlay" onClick={onClose} />
      <aside className="drawer" role="dialog" aria-modal="true">
        <DrawerHeader creator={creator} onClose={onClose} onChange={onChange} />
        <DrawerTabs tab={tab} onTab={setTab} />
        <div className="drawer-body">
          {tab === "overview" && <TabOverview creator={creator} />}
          {tab === "metrics" && <TabMetrics creator={creator} />}
          {tab === "contacts" && <TabContacts creator={creator} onChange={onChange} />}
          {tab === "integration" && <TabIntegration creator={creator} onChange={onChange} />}
          {tab === "activity" && <TabActivity creator={creator} />}
          {tab === "ai" && <TabAI creator={creator} />}
        </div>
      </aside>
    </>
  );
}

function DrawerHeader({ creator, onClose, onChange }) {
  const [c1, c2] = creator.avatarColor;
  const PlatIcon = PLATFORM_ICON[creator.platform];
  const [statusOpen, setStatusOpen] = useStateD(false);
  const statusBtn = useRefD(null);

  return (
    <div className="drawer-head">
      <div className="drawer-head-row">
        <div className="big-avatar" style={{ background: `linear-gradient(135deg, ${c1}, ${c2})` }}>
          {creator.initials}
        </div>
        <div className="title-block">
          <div className="name">{creator.name}</div>
          <div className="sub">{creator.handle} · {creator.niche}</div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button className="btn ghost icon-only" data-tooltip="Archive"><IconBookmark size={16} /></button>
          <button className="btn ghost icon-only" data-tooltip="Menu"><IconMore size={16} /></button>
          <button className="btn ghost icon-only" onClick={onClose} data-tooltip="Close (Esc)"><IconClose size={16} /></button>
        </div>
      </div>
      <div className="quick-meta">
        <button
          ref={statusBtn}
          className="btn sm"
          style={{ padding: 0, border: 0, background: "transparent" }}
          onClick={() => setStatusOpen(!statusOpen)}
        >
          <StatusPill status={creator.status} />
          <IconChevronDown size={12} style={{ marginLeft: 2, opacity: 0.6 }} />
        </button>
        {statusOpen && (
          <Popover anchor={statusBtn.current} onClose={() => setStatusOpen(false)}>
            <div className="pop-section">Status</div>
            {Object.entries(STATUS_META).map(([k, m]) => (
              <div
                key={k}
                className={`pop-item ${k === creator.status ? "selected" : ""}`}
                onClick={() => { onChange({ status: k }); setStatusOpen(false); }}
              >
                <span className="dot" style={{ width: 8, height: 8, borderRadius: "50%", background: m.color, display: "inline-block" }}></span>
                {m.ru}
                <IconCheck size={14} className="check" />
              </div>
            ))}
          </Popover>
        )}

        <span className="muted small">·</span>
        <PlatformBadge platform={creator.platform} size={16} />
        <span className="small" style={{ color: "var(--text-secondary)" }}>{platMetaName(creator.platform)}</span>

        <span className="muted small">·</span>
        <a className="cell-link" href={creator.channelUrl} target="_blank" rel="noopener">
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{creator.handle}</span>
          <IconExternal size={11} />
        </a>

        <span className="muted small">·</span>
        <span className="small muted">Manager: <b style={{ color: "var(--text-primary)" }}>{creator.manager.name}</b></span>
      </div>
    </div>
  );
}

function platMetaName(p) { return PLATFORM_META[p].ru; }

function DrawerTabs({ tab, onTab }) {
  const tabs = [
    ["overview", "Overview"],
    ["metrics", "Metrics"],
    ["contacts", "Contacts"],
    ["integration", "Integration"],
    ["activity", "Activity"],
    ["ai", "AI Analysis"],
  ];
  return (
    <div className="drawer-tabs">
      {tabs.map(([k, l]) => (
        <button key={k} className={`drawer-tab ${tab === k ? "active" : ""}`} onClick={() => onTab(k)}>{l}</button>
      ))}
    </div>
  );
}

// ── Overview tab ───────────────────────────────────────────
function TabOverview({ creator }) {
  return (
    <div>
      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconLightning size={14} /></span>
          Key metrics
        </div>
        <div className="metrics-grid">
          <MetricTile label="Subscribers" value={fmtNumD(creator.subs)} trend="+2.1% mo" trendDir="up" />
          <MetricTile label="Avg views" value={fmtNumD(creator.avgViews)} trend="last 30d" />
          <MetricTile label="CPV" value={`${creator.cpv} ₽`} />
          <MetricTile label="CPM" value={`${creator.cpm} ₽`} />
        </div>
      </div>

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconChart size={14} /></span>
          Views trend
          <span className="meta">last 8 weeks</span>
        </div>
        <Sparkline data={creator.spark} width={560} height={70} />
      </div>

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconUsers size={14} /></span>
          Audience
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <div>
            <div className="small muted" style={{ marginBottom: 6, fontWeight: 600 }}>Age</div>
            <BarList data={creator.age} />
          </div>
          <div>
            <div className="small muted" style={{ marginBottom: 6, fontWeight: 600 }}>Geo</div>
            <BarList data={creator.geo} />
          </div>
        </div>
        <div className="divider"></div>
        <div className="row gap-12 small">
          <span className="muted">Gender:</span>
          <span><b>{creator.gender.male}%</b> male</span>
          <span><b>{creator.gender.female}%</b> female</span>
          <span style={{ marginLeft: "auto", color: "var(--text-tertiary)" }}>
            City: {creator.city} · {creator.country}
          </span>
        </div>
      </div>

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconMessage size={14} /></span>
          Notes
        </div>
        <div className="small" style={{ lineHeight: 1.6 }}>
          {creator.notes || <span className="muted">No notes yet. Describe the creator's quirks, agreements, formats…</span>}
        </div>
      </div>
    </div>
  );
}
function fmtNumD(n) { return CRM.fmtNum(n); }

// ── Metrics tab ────────────────────────────────────────────
function TabMetrics({ creator }) {
  return (
    <div>
      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconChart size={14} /></span>
          Financials
        </div>
        <div className="metrics-grid">
          <MetricTile label="Integration price" value={CRM.fmtMoney(creator.price)} />
          <MetricTile label="CPV" value={`${creator.cpv} ₽`} />
          <MetricTile label="CPM" value={`${creator.cpm} ₽`} />
          <MetricTile label="Platform" value={PLATFORM_META[creator.platform].ru} />
        </div>
      </div>

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconEye size={14} /></span>
          Views by week
        </div>
        <Sparkline data={creator.spark} width={560} height={80} />
        <div className="row gap-12 small" style={{ marginTop: 8, justifyContent: "space-between" }}>
          <span className="muted">Min: <b style={{ color: "var(--text-primary)" }}>{CRM.fmtNum(Math.min(...creator.spark))}</b></span>
          <span className="muted">Avg: <b style={{ color: "var(--text-primary)" }}>{CRM.fmtNum(Math.round(creator.spark.reduce((a,b)=>a+b,0) / creator.spark.length))}</b></span>
          <span className="muted">Peak: <b style={{ color: "var(--text-primary)" }}>{CRM.fmtNum(Math.max(...creator.spark))}</b></span>
        </div>
      </div>

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconUsers size={14} /></span>
          Demographics
        </div>
        <BarList data={creator.age} />
      </div>

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconGlobe size={14} /></span>
          Geography
        </div>
        <BarList data={creator.geo} />
      </div>
    </div>
  );
}

// ── Contacts tab ───────────────────────────────────────────
function TabContacts({ creator, onChange }) {
  const channelIcon = (c) => c === "telegram" ? <IconMessage size={12} /> : c === "email" ? <IconMail size={12} /> : c === "phone" ? <IconPhone size={12} /> : <IconMessage size={12} />;
  return (
    <div>
      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconUsers size={14} /></span>
          Contact persons
          <span className="meta">{creator.contacts.length}</span>
        </div>
        {creator.contacts.map((c) => (
          <div className="contact-row" key={c.id}>
            <div className="avatar" style={{ background: `linear-gradient(135deg, ${c.avatarColor[0]}, ${c.avatarColor[1]})` }}>{c.initials}</div>
            <div className="info">
              <div className="name">{c.name}</div>
              <div className="channel">
                {channelIcon(c.channel)} <span style={{ marginLeft: 4 }}>{c.value}</span>
                {c.company && <span style={{ marginLeft: 8, color: "var(--text-secondary)" }}>· {c.company}</span>}
              </div>
            </div>
            <select
              className="role-select"
              value={c.role}
              onChange={(e) => {
                const next = creator.contacts.map(x => x.id === c.id ? { ...x, role: e.target.value } : x);
                onChange({ contacts: next });
              }}
            >
              <option value="creator">Creator</option>
              <option value="manager">Manager</option>
            </select>
          </div>
        ))}
        <button className="btn sm ghost" style={{ marginTop: 6 }}>
          <IconPlus size={12} /> Add contact
        </button>
      </div>
    </div>
  );
}

// ── Integration tab ────────────────────────────────────────
function TabIntegration({ creator, onChange }) {
  const [refreshing, setRefreshing] = useStateD(false);
  const [pulseKey, setPulseKey] = useStateD(0);
  const integration = creator.integration;

  const refreshViews = () => {
    setRefreshing(true);
    setTimeout(() => {
      // In production: real API call here.
      // window.YT_API.getVideo(integration.url) etc.
      const delta = Math.round((creator.avgViews * (0.05 + Math.random() * 0.2)));
      const next = { ...integration, liveViews: (integration.liveViews || creator.avgViews) + delta };
      onChange({ integration: next });
      setRefreshing(false);
      setPulseKey(k => k + 1);
    }, 950);
  };

  if (!integration) {
    return (
      <div className="empty">
        <div className="icon"><IconLink size={28} /></div>
        <div style={{ marginTop: 6, color: "var(--text-secondary)" }}>No integration yet</div>
        <div className="small" style={{ marginTop: 4 }}>Appears after status "Paid"</div>
        <button className="btn primary" style={{ marginTop: 14 }}>
          <IconPlus size={14} /> Create integration
        </button>
      </div>
    );
  }

  return (
    <div>
      {integration.publishedAt && (
        <div className="section-block">
          <div className="section-block-title">
            <span className="icon"><IconPlay size={14} /></span>
            Published video
            <button className="btn sm ghost" style={{ marginLeft: "auto" }} onClick={refreshViews} disabled={refreshing}>
              <IconRefresh size={12} style={{ animation: refreshing ? "spin 1s linear infinite" : "none" }} />
              {refreshing ? "Refreshing..." : "Refresh views"}
            </button>
          </div>
          <div className="integration-views" key={pulseKey} style={{ marginBottom: 12 }}>
            <span className="pulse"></span>
            <span className="live-value">{CRM.fmtNum(integration.liveViews)}</span>
            <span className="small muted">live views</span>
            <span className="small muted" style={{ marginLeft: "auto" }}>
              Forecast: <b style={{ color: "var(--text-primary)" }}>{CRM.fmtNum(creator.avgViews)}</b>
              {" "}
              ({Math.round((integration.liveViews / creator.avgViews) * 100)}% of avg)
            </span>
          </div>
          <div className="integration-row">
            <div className="lbl">Link</div>
            <div className="val"><a href={integration.url} target="_blank" rel="noopener">{integration.url} <IconExternal size={11} /></a></div>
          </div>
          <div className="integration-row">
            <div className="lbl">Published</div>
            <div className="val">{CRM.fmtDate(integration.publishedAt)} 2026</div>
          </div>
        </div>
      )}

      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconLightning size={14} /></span>
          Deal parameters
        </div>
        <div className="integration-row">
          <div className="lbl">Price</div>
          <div className="val num bold">{CRM.fmtMoneyFull(creator.price)}</div>
        </div>
        <div className="integration-row">
          <div className="lbl">CPV (forecast)</div>
          <div className="val num">{creator.cpv} ₽</div>
        </div>
        <div className="integration-row">
          <div className="lbl">CPM (forecast)</div>
          <div className="val num">{creator.cpm} ₽</div>
        </div>
        <div className="integration-row">
          <div className="lbl">Scheduled</div>
          <div className="val">{integration.scheduledAt ? CRM.fmtDate(integration.scheduledAt) + " 2026" : "—"}</div>
        </div>
        <div className="integration-row">
          <div className="lbl">Manager</div>
          <div className="val">{creator.manager.name}</div>
        </div>
        <div className="integration-row">
          <div className="lbl">Status</div>
          <div className="val"><StatusPill status={creator.status} /></div>
        </div>
      </div>

      <div className="section-block" style={{ background: "var(--bg-surface-2)" }}>
        <div className="small" style={{ color: "var(--text-secondary)", lineHeight: 1.6 }}>
          💡 <b>Auto-sync</b>: connect a platform API key in Settings → Integrations,
          and views will update automatically every hour.
          {" "}
          <a style={{ color: "var(--accent-500)" }}>Connect YouTube API →</a>
        </div>
      </div>
    </div>
  );
}

// ── Activity tab ───────────────────────────────────────────
function TabActivity({ creator }) {
  return (
    <div>
      <div className="section-block">
        <div className="section-block-title">
          <span className="icon"><IconClock size={14} /></span>
          Event log
        </div>
        <div className="timeline">
          {creator.activity.map((a, i) => (
            <div key={i} className="timeline-item">
              <span className="marker" />
              <div className="when">{CRM.relTime(a.when.getTime())}</div>
              <div className="what">{a.what}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── AI tab ─────────────────────────────────────────────────
function TabAI({ creator }) {
  const [loading, setLoading] = useStateD(false);
  const [output, setOutput] = useStateD("");
  const [error, setError] = useStateD(null);
  const cancelRef = useRefD(false);

  const run = async () => {
    setLoading(true);
    setOutput("");
    setError(null);
    cancelRef.current = false;
    const prompt = `You are an influencer marketing analyst. Give a concise, specific analysis of this creator for a CRM. Be sharp and useful, no fluff. Structure:
**Profile**: 1 sentence
**Strengths**: 2-3 bullets
**Risks**: 2-3 bullets
**Recommendation**: 1 sentence on the integration approach

Data:
- Name: ${creator.name} (${creator.handle})
- Platform: ${PLATFORM_META[creator.platform].ru}
- Niche: ${creator.niche}
- Subscribers: ${creator.subs.toLocaleString()}
- Avg views: ${creator.avgViews.toLocaleString()}
- ER: ${((creator.avgViews / creator.subs) * 100).toFixed(1)}%
- CPM: ${creator.cpm} RUB
- Price: ${creator.price.toLocaleString()} RUB
- Top age bucket: ${Object.entries(creator.age).sort((a,b)=>b[1]-a[1])[0][0]} — ${Object.entries(creator.age).sort((a,b)=>b[1]-a[1])[0][1]}%
- Top geo: ${Object.entries(creator.geo).sort((a,b)=>b[1]-a[1]).slice(0,2).map(([k,v])=>`${k} ${v}%`).join(", ")}
- Gender: M ${creator.gender.male}% / F ${creator.gender.female}%

Respond in English, in Markdown, compact.`;

    try {
      const text = await window.claude.complete(prompt);
      if (cancelRef.current) return;
      // Type-out animation
      let i = 0;
      const tick = () => {
        if (cancelRef.current) return;
        i += Math.max(2, Math.round(text.length / 120));
        setOutput(text.slice(0, i));
        if (i < text.length) setTimeout(tick, 16);
        else setLoading(false);
      };
      tick();
    } catch (e) {
      setError("Couldn't get a response. Please try again.");
      setLoading(false);
    }
  };

  return (
    <div>
      <div className="ai-panel">
        <div className="ai-head">
          <div className="ai-logo"><IconSparkle size={16} /></div>
          <div>
            <div className="ai-title">AI channel analysis</div>
            <div className="ai-sub">Claude will analyze the creator and recommend an integration approach</div>
          </div>
          <button
            className="btn primary"
            style={{ marginLeft: "auto" }}
            onClick={run}
            disabled={loading}
          >
            <IconSparkle size={14} />
            {output ? "Re-run" : "Run analysis"}
          </button>
        </div>

        <div className={`ai-output ${output ? "" : "empty"}`}>
          {output ? (
            <span dangerouslySetInnerHTML={{ __html: renderMd(output) }} />
          ) : error ? (
            <span style={{ color: "var(--danger)" }}>{error}</span>
          ) : (
            <span>Click "Run analysis" — Claude will study the creator's profile and metrics.</span>
          )}
          {loading && <span className="ai-cursor"></span>}
        </div>
      </div>

      <div className="section-block" style={{ marginTop: 16 }}>
        <div className="section-block-title">
          <span className="icon"><IconLightning size={14} /></span>
          What else can be automated
        </div>
        <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.7 }}>
          <li>Pull live view counts via YouTube/Twitch/VK API</li>
          <li>Auto-calculate CPV/CPM after publishing</li>
          <li>Parse recent videos and verify topic relevance</li>
          <li>Summary of similar creators in your base</li>
        </ul>
      </div>
    </div>
  );
}

// Minimal markdown renderer for Claude output: **bold**, * bullets, line breaks.
function renderMd(text) {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/\*\*(.+?)\*\*/g, "<b>$1</b>")
    .replace(/^- (.+)$/gm, "• $1")
    .replace(/\n/g, "<br>");
}

// Spinner keyframes (injected once)
if (!document.getElementById("spinner-keyframes")) {
  const style = document.createElement("style");
  style.id = "spinner-keyframes";
  style.textContent = "@keyframes spin { to { transform: rotate(360deg); } }";
  document.head.appendChild(style);
}

Object.assign(window, { CreatorDrawer });