// Drill-down drawer + main app + tweaks

const Drawer = ({ data, onClose }) => {
  const open = !!data;
  const ctx = useDashData();
  const TRAFFIC = ctx.data?.TRAFFIC || [];
  const KEYWORDS = ctx.data?.KEYWORDS || [];
  return (
    <>
      <div className={`drawer-back ${open ? "is-open" : ""}`} onClick={onClose}/>
      <aside className={`drawer ${open ? "is-open" : ""}`}>
        {data && (
          <>
            <div className="drawer__head">
              <div>
                <div style={{ font: "500 11px/1 var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 6 }}>
                  {data.kind === "keyword" ? "Keyword" : "Page"}
                </div>
                <div style={{ font: "500 22px/1.2 var(--serif)", letterSpacing: "-0.01em", color: "var(--ink)" }}>
                  {data.kind === "keyword" ? data.row.kw : data.row.url}
                </div>
                {data.kind === "keyword" && (
                  <div style={{ font: "400 12px/1.3 var(--mono)", color: "var(--muted)", marginTop: 6 }}>
                    Lands on {data.row.url}
                  </div>
                )}
              </div>
              <button className="icon-btn" onClick={onClose}><Ico name="close" size={12}/></button>
            </div>
            <div className="drawer__body">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 18 }}>
                {data.kind === "keyword" ? (
                  <>
                    <div className="kpi" style={{ padding: 12 }}>
                      <div className="kpi__l">Position</div>
                      <div className="kpi__v" style={{ fontSize: 24 }}>{data.row.pos}</div>
                      <div className={`kpi__d ${data.row.prev > data.row.pos ? "up" : "down"}`}>
                        from #{data.row.prev}
                      </div>
                    </div>
                    <div className="kpi" style={{ padding: 12 }}>
                      <div className="kpi__l">Volume</div>
                      <div className="kpi__v" style={{ fontSize: 24 }}>{data.row.vol.toLocaleString()}</div>
                    </div>
                    <div className="kpi" style={{ padding: 12 }}>
                      <div className="kpi__l">CTR</div>
                      <div className="kpi__v" style={{ fontSize: 24 }}>{data.row.ctr}%</div>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="kpi" style={{ padding: 12 }}>
                      <div className="kpi__l">Clicks</div>
                      <div className="kpi__v" style={{ fontSize: 24 }}>{data.row.clicks.toLocaleString()}</div>
                      <div className={`kpi__d ${data.row.d>0?"up":"down"}`}>{data.row.d>0?"+":""}{data.row.d}%</div>
                    </div>
                    <div className="kpi" style={{ padding: 12 }}>
                      <div className="kpi__l">Avg pos</div>
                      <div className="kpi__v" style={{ fontSize: 24 }}>{data.row.pos}</div>
                    </div>
                    <div className="kpi" style={{ padding: 12 }}>
                      <div className="kpi__l">CTR</div>
                      <div className="kpi__v" style={{ fontSize: 24 }}>{data.row.ctr}%</div>
                    </div>
                  </>
                )}
              </div>

              {TRAFFIC.length > 0 && (
                <div style={{ marginBottom: 18 }}>
                  <h4 style={{ font: "600 13px/1 var(--sans)", margin: "0 0 10px" }}>Genel dönem trendi</h4>
                  <div style={{ background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 8, padding: 12 }}>
                    <TrafficChart data={TRAFFIC} metric="clicks" compare={false}/>
                  </div>
                </div>
              )}

              {data.kind === "page" && KEYWORDS.length > 0 && (
                <>
                  <h4 style={{ font: "600 13px/1 var(--sans)", margin: "0 0 10px" }}>Bu dönem en iyi sorgular</h4>
                  <table className="t" style={{ marginBottom: 18 }}>
                    <tbody>
                      {KEYWORDS.slice(0, 5).map(k => (
                        <tr key={k.kw}>
                          <td>{k.kw}</td>
                          <td className="num"><span className={`pos ${k.pos<5?"t1":k.pos<10?"t2":"t3"}`}>{k.pos}</span></td>
                          <td className="num">{k.vol.toLocaleString("tr-TR")}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </>
              )}
            </div>
          </>
        )}
      </aside>
    </>
  );
};

// Tweaks

const DashTweaks = () => {
  const defaults = /*EDITMODE-BEGIN*/{
    "theme": "light",
    "density": "comfortable",
    "accent": "rust"
  }/*EDITMODE-END*/;
  const [t, set] = useTweaks(defaults);

  React.useEffect(() => {
    document.body.classList.toggle("variant-b", t.theme === "dark");
    document.body.classList.toggle("dense", t.density === "dense");
    document.documentElement.style.setProperty(
      "--rust",
      t.accent === "teal" ? "#2E5762" : t.accent === "amber" ? "#B57B0B" : "#B5532E"
    );
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio value={t.theme} onChange={v => set("theme", v)}
          options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]}/>
      </TweakSection>
      <TweakSection title="Density">
        <TweakRadio value={t.density} onChange={v => set("density", v)}
          options={[{ value: "comfortable", label: "Comfortable" }, { value: "dense", label: "Dense" }]}/>
      </TweakSection>
      <TweakSection title="Accent">
        <TweakRadio value={t.accent} onChange={v => set("accent", v)}
          options={[
            { value: "rust", label: "Rust" },
            { value: "teal", label: "Teal" },
            { value: "amber", label: "Amber" },
          ]}/>
      </TweakSection>
    </TweaksPanel>
  );
};

// Main app

const DashApp = () => {
  const [active, setActive] = React.useState("overview");
  const [range, setRange] = React.useState("30d");
  const [compare, setCompare] = React.useState(true);
  const [brand, setBrand] = React.useState(BRANDS[0]);
  const [switcher, setSwitcher] = React.useState(false);
  const [drawer, setDrawer] = React.useState(null);

  const Page = {
    overview: OverviewPage,
    keywords: KeywordsPage,
    pages: PagesPage,
    backlinks: BacklinksPage,
    technical: TechnicalPage,
    ai: AIPage,
    competitors: CompetitorsPage,
  }[active];

  return (
    <DataProvider range={range}>
      <div className="app">
        <Sidebar active={active} setActive={setActive} brand={brand} openSwitcher={() => setSwitcher(true)}/>
        <BrandSwitcher open={switcher} onClose={() => setSwitcher(false)} current={brand} onPick={setBrand}/>
        <main className="main">
          <Topbar active={active} range={range} setRange={setRange} compare={compare} setCompare={setCompare} brand={brand}/>
          <Page openDrawer={setDrawer} compare={compare}/>
        </main>
        <Drawer data={drawer} onClose={() => setDrawer(null)}/>
        <DashTweaks/>
      </div>
    </DataProvider>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<DashApp/>);