"use client";

import { ChangeEvent, ReactNode, useEffect, useMemo, useState } from "react";
import {
  Dimension,
  HandSide,
  Quota,
  Reading,
  ReadingSummary,
  ReadingType,
  ReportData,
  apiFetch,
  ensureToken,
  uploadFaceImage,
  uploadPalmImage,
} from "@/lib/api";

const handText: Record<HandSide, string> = {
  left: "左手",
  right: "右手",
  unknown: "不确定",
};

const statusText: Record<Reading["status"], string> = {
  pending: "等待中",
  processing: "生成中",
  completed: "已完成",
  failed: "失败",
};

const readingMeta: Record<ReadingType, { name: string; title: string; label: string; description: string }> = {
  palm: {
    name: "手相",
    title: "掌心解读",
    label: "PALM READING",
    description: "上传掌心照片，生成生活、学习、事业与关系提醒。",
  },
  face: {
    name: "面相",
    title: "气色与五官",
    label: "FACE READING",
    description: "上传单人正脸照，观察脸型、五官、气色与表达状态。",
  },
  bazi: {
    name: "八字",
    title: "生辰格局",
    label: "BAZI READING",
    description: "填写出生信息，排出四柱后生成生活化八字报告。",
  },
};

type View = "home" | ReadingType | "archive";
const views: View[] = ["home", "palm", "face", "bazi", "archive"];

type BaziForm = {
  nickname: string;
  gender: string;
  calendar_type: "solar" | "lunar";
  is_leap_month: boolean;
  birth_date: string;
  birth_time: string;
  time_unknown: boolean;
  birth_place: string;
};

type BaziChart = {
  solar_date?: string;
  lunar_date?: string;
  birth_time?: string | null;
  time_unknown?: boolean;
  birth_place?: string | null;
  pillars?: Record<string, string>;
  day_master?: string;
  wuxing_balance?: Record<string, number>;
};

const wuxingNames = ["木", "火", "土", "金", "水"] as const;
type WuxingName = (typeof wuxingNames)[number];

const stemWuxing: Record<string, WuxingName> = {
  甲: "木",
  乙: "木",
  丙: "火",
  丁: "火",
  戊: "土",
  己: "土",
  庚: "金",
  辛: "金",
  壬: "水",
  癸: "水",
};

const branchWuxing: Record<string, WuxingName> = {
  子: "水",
  丑: "土",
  寅: "木",
  卯: "木",
  辰: "土",
  巳: "火",
  午: "火",
  未: "土",
  申: "金",
  酉: "金",
  戌: "土",
  亥: "水",
};

const defaultBaziForm: BaziForm = {
  nickname: "",
  gender: "",
  calendar_type: "solar",
  is_leap_month: false,
  birth_date: "",
  birth_time: "12:00",
  time_unknown: false,
  birth_place: "",
};

export default function PalmWebApp({ initialView = "home" }: { initialView?: View }) {
  const [ready, setReady] = useState(false);
  const [palmFile, setPalmFile] = useState<File | null>(null);
  const [faceFile, setFaceFile] = useState<File | null>(null);
  const [palmPreview, setPalmPreview] = useState("");
  const [facePreview, setFacePreview] = useState("");
  const [handSide, setHandSide] = useState<HandSide>("unknown");
  const [baziForm, setBaziForm] = useState<BaziForm>(defaultBaziForm);
  const [busyText, setBusyText] = useState("");
  const [error, setError] = useState("");
  const [readings, setReadings] = useState<ReadingSummary[]>([]);
  const [quota, setQuota] = useState<Quota | null>(null);
  const [activeReading, setActiveReading] = useState<Reading | null>(null);
  const [activeView, setActiveView] = useState<View>(initialView);
  const [activeJobId, setActiveJobId] = useState("");
  const [activeJobType, setActiveJobType] = useState<ReadingType>("palm");

  useEffect(() => {
    setActiveView(readViewFromPath(initialView));
    const onPopState = () => setActiveView(readViewFromPath(initialView));
    window.addEventListener("popstate", onPopState);

    ensureToken()
      .then(() => Promise.all([loadReadings(), loadQuota()]))
      .then(() => setReady(true))
      .catch((err) => {
        setError(err.message || "初始化失败");
        setReady(true);
      });

    return () => window.removeEventListener("popstate", onPopState);
  }, [initialView]);

  useEffect(() => {
    return () => {
      if (palmPreview) URL.revokeObjectURL(palmPreview);
      if (facePreview) URL.revokeObjectURL(facePreview);
    };
  }, [palmPreview, facePreview]);

  const completedReadings = readings.filter((item) => item.status === "completed").length;
  const hasActiveJob = Boolean(activeJobId);

  function pickFile(event: ChangeEvent<HTMLInputElement>, type: "palm" | "face") {
    const selected = event.target.files?.[0];
    if (!selected) return;
    setError("");
    const url = URL.createObjectURL(selected);
    if (type === "palm") {
      if (palmPreview) URL.revokeObjectURL(palmPreview);
      setPalmFile(selected);
      setPalmPreview(url);
    } else {
      if (facePreview) URL.revokeObjectURL(facePreview);
      setFaceFile(selected);
      setFacePreview(url);
    }
  }

  async function loadReadings() {
    const data = await apiFetch<ReadingSummary[]>("/readings");
    setReadings(data);
  }

  async function loadQuota() {
    const data = await apiFetch<Quota>("/readings/quota");
    setQuota(data);
  }

  async function startImageReading(type: "palm" | "face") {
    if (quota && quota.remaining <= 0) {
      setError("今日 5 次解读机会已用完，请明天 0 点后再来。");
      return;
    }
    const file = type === "palm" ? palmFile : faceFile;
    if (!file) {
      setError(type === "palm" ? "请先选择一张清晰的掌心照片。" : "请先选择一张清晰的单人正脸照片。");
      return;
    }
    setBusyText(type === "palm" ? "正在接入掌纹照片..." : "正在接入正脸照片...");
    setError("");
    try {
      const upload = type === "palm" ? await uploadPalmImage(file) : await uploadFaceImage(file);
      const reading = await apiFetch<Reading>("/readings", {
        method: "POST",
        body: JSON.stringify({
          reading_type: type,
          image_id: upload.image_id,
          input_data: type === "palm" ? { hand_side: handSide } : { photo_style: "front_single" },
        }),
      });
      afterTaskCreated(reading);
      if (type === "palm") {
        setPalmFile(null);
        setPalmPreview("");
      } else {
        setFaceFile(null);
        setFacePreview("");
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "提交失败");
      setBusyText("");
    }
  }

  async function startBaziReading() {
    if (quota && quota.remaining <= 0) {
      setError("今日 5 次解读机会已用完，请明天 0 点后再来。");
      return;
    }
    if (!baziForm.birth_date) {
      setError("请先填写出生日期。");
      return;
    }
    if (!baziForm.time_unknown && !baziForm.birth_time) {
      setError("请选择出生时间，或勾选“不确定时辰”。");
      return;
    }
    setBusyText("正在排出四柱...");
    setError("");
    try {
      const reading = await apiFetch<Reading>("/readings", {
        method: "POST",
        body: JSON.stringify({
          reading_type: "bazi",
          input_data: {
            ...baziForm,
            nickname: baziForm.nickname || null,
            gender: baziForm.gender || null,
            birth_place: baziForm.birth_place || null,
          },
        }),
      });
      afterTaskCreated(reading);
    } catch (err) {
      setError(err instanceof Error ? err.message : "提交失败");
      setBusyText("");
    }
  }

  function afterTaskCreated(reading: Reading) {
    setActiveReading(reading);
    setActiveJobId(reading.id);
    setActiveJobType(reading.reading_type);
    setBusyText("");
    void pollReading(reading.id)
      .then(() => loadReadings())
      .catch((err) => setError(err instanceof Error ? err.message : "报告生成失败"))
      .finally(() => setActiveJobId(""));
    void loadReadings();
    void loadQuota();
  }

  async function pollReading(readingId: string) {
    for (let i = 0; i < 80; i += 1) {
      const reading = await apiFetch<Reading>(`/readings/${readingId}`);
      setActiveReading(reading);
      if (reading.status === "completed") return reading;
      if (reading.status === "failed") throw new Error(reading.error_message || "报告生成失败");
      await sleep(2200);
    }
    throw new Error("生成时间较长，请稍后在档案中查看。");
  }

  async function openReading(readingId: string) {
    setError("");
    const reading = await apiFetch<Reading>(`/readings/${readingId}`);
    setActiveReading(reading);
    navigate("archive");
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  async function deleteReading(readingId: string) {
    await apiFetch(`/readings/${readingId}`, { method: "DELETE" });
    if (activeReading?.id === readingId) setActiveReading(null);
    await loadReadings();
  }

  function navigate(view: View) {
    setError("");
    setActiveView(view);
    window.history.pushState(null, "", pathForView(view));
    if (view !== "archive") {
      setActiveReading(null);
    }
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  return (
    <main className="shell">
      <header className="app-topbar">
        <button className="brand compact-button" onClick={() => navigate("home")}>
          <span className="seal">先</span>
          <span>
            <small>CYBER MISTER</small>
            <strong>赛博先生</strong>
          </span>
        </button>
        <nav className="desktop-nav" aria-label="主导航">
          {views.map((view) => (
            <button key={view} className={activeView === view ? "active" : ""} onClick={() => navigate(view)}>
              {view === "home" ? "首页" : view === "archive" ? "档案" : readingMeta[view].name}
            </button>
          ))}
        </nav>
      </header>

      {hasActiveJob ? (
        <button className="job-banner" onClick={() => activeJobId && openReading(activeJobId)}>
          <span className="pulse-dot" />
          <span>先生正在分析{readingMeta[activeJobType].name}，完成后会自动放入档案。你可以继续浏览。</span>
                <strong>去档案</strong>
        </button>
      ) : null}

      {activeView === "home" ? (
        <section className="home-screen">
          <div className="hero-copy">
            <p className="eyebrow">AI 玄学档案 · 娱乐占卜 · 自我反思</p>
            <h1>把日常困惑，交给先生慢慢看。</h1>
            <p>从手相、面相到八字，每一次解读都更贴近生活、学习、事业与关系。</p>
          </div>

          <div className="service-grid">
            {(["palm", "face", "bazi"] as ReadingType[]).map((type) => (
              <button key={type} className="service-card" onClick={() => navigate(type)}>
                <span>已开放</span>
                <strong>{readingMeta[type].name}</strong>
                <em>{readingMeta[type].title}</em>
                <small>{readingMeta[type].description}</small>
              </button>
            ))}
          </div>

          <HomeStats total={readings.length} completed={completedReadings} quota={quota} />
        </section>
      ) : null}

      {activeView === "palm" ? (
        <ImageReadingForm
          type="palm"
          preview={palmPreview}
          busyText={busyText}
          ready={ready}
          error={error}
          quota={quota}
          onPickFile={(event) => pickFile(event, "palm")}
          onSubmit={() => startImageReading("palm")}
          extra={
            <div className="segmented" aria-label="选择左右手">
              {(["left", "right", "unknown"] as HandSide[]).map((side) => (
                <button key={side} className={handSide === side ? "active" : ""} onClick={() => setHandSide(side)}>
                  {handText[side]}
                </button>
              ))}
            </div>
          }
        />
      ) : null}

      {activeView === "face" ? (
        <ImageReadingForm
          type="face"
          preview={facePreview}
          busyText={busyText}
          ready={ready}
          error={error}
          quota={quota}
          onPickFile={(event) => pickFile(event, "face")}
          onSubmit={() => startImageReading("face")}
          extra={null}
        />
      ) : null}

      {activeView === "bazi" ? (
        <BaziFormView
          form={baziForm}
          setForm={setBaziForm}
          busyText={busyText}
          ready={ready}
          error={error}
          quota={quota}
          onSubmit={startBaziReading}
        />
      ) : null}

      {activeView === "archive" ? (
        <section className="archive-screen">
          <div className="archive-head">
            <div>
              <p className="section-label">MISTER ARCHIVE</p>
              <h2>个人玄学档案</h2>
            </div>
            <button className="ghost-action" onClick={() => navigate("home")}>新建解读</button>
          </div>
          <div className="report-list">
            {readings.length ? (
              readings.map((item) => (
                <div key={item.id} className={`archive-item ${item.status === "failed" ? "is-failed" : ""}`}>
                  <button className="archive-open" onClick={() => openReading(item.id)}>
                    <span>
                    <strong>{readingMeta[item.reading_type].name}报告</strong>
                    <small>{formatDate(item.created_at)}</small>
                    {item.overall_summary ? <b>{item.overall_summary}</b> : null}
                    </span>
                  </button>
                  <div className="archive-actions">
                    <em>{statusText[item.status]}</em>
                    <button className="archive-delete" onClick={() => deleteReading(item.id)} aria-label={`删除${readingMeta[item.reading_type].name}报告`}>
                      移除
                    </button>
                  </div>
                </div>
              ))
            ) : (
              <p className="empty">暂无档案。生成第一份报告后会出现在这里。</p>
            )}
          </div>
          {activeReading ? <ReportPanel reading={activeReading} onDelete={() => deleteReading(activeReading.id)} /> : null}
        </section>
      ) : null}

      <nav className="mobile-tabbar" aria-label="移动端导航">
        {views.map((view) => (
          <button key={view} className={activeView === view ? "active" : ""} onClick={() => navigate(view)}>
            <span>{view === "home" ? "⌂" : view === "archive" ? "册" : readingMeta[view].name.slice(0, 1)}</span>
            {view === "home" ? "首页" : view === "archive" ? "档案" : readingMeta[view].name}
          </button>
        ))}
      </nav>
    </main>
  );
}

function ImageReadingForm({
  type,
  preview,
  busyText,
  ready,
  error,
  quota,
  extra,
  onPickFile,
  onSubmit,
}: {
  type: "palm" | "face";
  preview: string;
  busyText: string;
  ready: boolean;
  error: string;
  quota: Quota | null;
  extra: ReactNode;
  onPickFile: (event: ChangeEvent<HTMLInputElement>) => void;
  onSubmit: () => void;
}) {
  const isPalm = type === "palm";
  return (
    <section className="workspace">
      <div className="upload-card">
        <div className="section-label">{readingMeta[type].label}</div>
        <h2>{isPalm ? "上传掌心照片" : "上传正脸照片"}</h2>
        <p>{isPalm ? "掌心完整入镜、光线充足、纹路清晰。左右手不确定可以选“不确定”。" : "请上传单人正脸照，五官无遮挡，光线自然清晰。"}</p>

        <label className={`drop-zone ${preview ? "has-preview" : ""}`}>
          {preview ? (
            <img src={preview} alt={isPalm ? "掌心照片预览" : "正脸照片预览"} />
          ) : (
            <span>
              <strong>选择照片</strong>
              <small>支持 JPG / PNG / WEBP</small>
            </span>
          )}
          <input type="file" accept="image/png,image/jpeg,image/webp" onChange={onPickFile} />
        </label>

        {extra}
        <button className="primary-action" disabled={!ready || Boolean(busyText) || quota?.remaining === 0} onClick={onSubmit}>
          {busyText || (quota?.remaining === 0 ? "今日次数已用完" : "提交分析")}
        </button>
        {error ? <p className="error">{error}</p> : null}
      </div>

      <aside className="side-panel">
        <div className="mini-card">
          <div className="section-label">生成方式</div>
          <h3>提交后可离开等待</h3>
          <p>提交成功后，系统会在后台生成报告。你可以继续看档案，完成后自动刷新。</p>
        </div>
      </aside>
    </section>
  );
}

function BaziFormView({
  form,
  setForm,
  busyText,
  ready,
  error,
  quota,
  onSubmit,
}: {
  form: BaziForm;
  setForm: (form: BaziForm) => void;
  busyText: string;
  ready: boolean;
  error: string;
  quota: Quota | null;
  onSubmit: () => void;
}) {
  return (
    <section className="workspace">
      <div className="upload-card">
        <div className="section-label">BAZI READING</div>
        <h2>填写生辰信息</h2>
        <p>输入出生日期与时间，赛博先生会先排出四柱，再把格局翻译成贴近日常的提醒。</p>

        <div className="form-grid">
          <label className="field">
            <span>昵称</span>
            <input value={form.nickname} onChange={(event) => setForm({ ...form, nickname: event.target.value })} placeholder="可不填" />
          </label>
          <label className="field">
            <span>性别/称谓</span>
            <select value={form.gender} onChange={(event) => setForm({ ...form, gender: event.target.value })}>
              <option value="">不填写</option>
              <option value="female">女</option>
              <option value="male">男</option>
              <option value="other">不限定</option>
            </select>
          </label>
          <label className="field">
            <span>历法</span>
            <select value={form.calendar_type} onChange={(event) => setForm({ ...form, calendar_type: event.target.value as "solar" | "lunar" })}>
              <option value="solar">公历</option>
              <option value="lunar">农历</option>
            </select>
          </label>
          {form.calendar_type === "lunar" ? (
            <label className="checkbox-line">
              <input type="checkbox" checked={form.is_leap_month} onChange={(event) => setForm({ ...form, is_leap_month: event.target.checked })} />
              闰月
            </label>
          ) : null}
          <label className="field">
            <span>出生日期</span>
            <input type="date" value={form.birth_date} onChange={(event) => setForm({ ...form, birth_date: event.target.value })} />
          </label>
          <label className="field">
            <span>出生时间</span>
            <input type="time" value={form.birth_time} disabled={form.time_unknown} onChange={(event) => setForm({ ...form, birth_time: event.target.value })} />
          </label>
          <label className="checkbox-line">
            <input type="checkbox" checked={form.time_unknown} onChange={(event) => setForm({ ...form, time_unknown: event.target.checked })} />
            不确定时辰
          </label>
          <label className="field field-wide">
            <span>出生地</span>
            <input value={form.birth_place} onChange={(event) => setForm({ ...form, birth_place: event.target.value })} placeholder="例如：广东深圳" />
          </label>
        </div>

        <button className="primary-action" disabled={!ready || Boolean(busyText) || quota?.remaining === 0} onClick={onSubmit}>
          {busyText || (quota?.remaining === 0 ? "今日次数已用完" : "提交排盘")}
        </button>
        {error ? <p className="error">{error}</p> : null}
      </div>

      <aside className="side-panel">
        <div className="mini-card">
          <div className="section-label">排盘说明</div>
          <h3>先排盘，再解读</h3>
          <p>后端会先计算四柱、五行和十神线索，再让赛博先生生成更接地气的生活化报告。</p>
        </div>
      </aside>
    </section>
  );
}

function HomeStats({ total, completed, quota }: { total: number; completed: number; quota: Quota | null }) {
  return (
    <div className="home-stats">
      <div>
        <p className="section-label">TODAY STATUS</p>
        <h2>今日解读状态</h2>
      </div>
      <div className="stats">
        <Stat label="今日剩余" value={quota?.remaining ?? 0} />
        <Stat label="每日上限" value={quota?.limit ?? 5} />
        <Stat label="累计报告" value={total} />
        <Stat label="已完成" value={completed} />
      </div>
    </div>
  );
}

function ReportPanel({ reading, onDelete }: { reading: Reading; onDelete: () => void }) {
  const data = reading.report_data;
  const score = useMemo(() => getScore(data), [data]);
  const type = reading.reading_type;
  const handSide = (reading.input_data?.hand_side as HandSide | undefined) || "unknown";
  if (!data) {
    return (
      <section className="report-panel">
        <h3>{statusText[reading.status]}</h3>
        <p>{reading.error_message || "先生正在整理报告。"}</p>
        <button className="delete-action" onClick={onDelete}>删除这份报告</button>
      </section>
    );
  }

  return (
    <section className="report-panel">
      <div className="report-hero">
        <div>
          <p className="section-label">
            {readingMeta[type].label}
            {type === "palm" ? ` · ${handText[handSide]}` : ""}
          </p>
          <h3>赛博先生{readingMeta[type].name}报告</h3>
          <p>{data.overall_summary}</p>
        </div>
        <div className="score">
          <strong>{score}</strong>
          <span>/100</span>
        </div>
      </div>

      <div className="keywords">
        {data.lucky_keywords.map((word) => (
          <span key={word}>{word}</span>
        ))}
      </div>

      {type === "bazi" ? <BaziChartPanel chart={getBaziChart(reading)} /> : null}

      <div className="dimension-grid">
        {data.dimensions.map((dimension, index) => (
          <DimensionCard key={`${dimension.name}-${index}`} dimension={dimension} index={index} />
        ))}
      </div>

      <div className="summary-grid">
        <SummaryList title="优势倾向" items={data.strengths} />
        <SummaryList title="需要留意" items={data.challenges} />
        <SummaryList title="近期建议" items={data.suggestions} />
      </div>

      <p className="disclaimer">{data.disclaimer}</p>
      <button className="delete-action" onClick={onDelete}>删除这份报告</button>
    </section>
  );
}

function BaziChartPanel({ chart }: { chart: BaziChart | null }) {
  if (!chart) return null;
  const pillars = chart.pillars || {};
  const wuxing = getWuxingBalance(chart);
  const pillarItems = [
    ["年柱", pillars.year],
    ["月柱", pillars.month],
    ["日柱", pillars.day],
    ["时柱", pillars.time],
  ];

  return (
    <section className="bazi-chart">
      <div className="bazi-chart-head">
        <div>
          <p className="section-label">CHART</p>
          <h4>排盘核心</h4>
        </div>
        <span>{chart.time_unknown ? "时辰不详" : chart.birth_time || "已记录时辰"}</span>
      </div>
      <div className="pillar-row">
        {pillarItems.map(([label, value]) => (
          <div className="pillar" key={label}>
            <span>{label}</span>
            <strong>{value || "-"}</strong>
          </div>
        ))}
      </div>
      <div className="chart-facts">
        <span>公历：{chart.solar_date || "-"}</span>
        <span>农历：{chart.lunar_date || "-"}</span>
        <span>日主：{chart.day_master || "-"}</span>
        {chart.birth_place ? <span>出生地：{chart.birth_place}</span> : null}
      </div>
      <div className="wuxing-bars">
        {wuxingNames.map((name) => {
          const value = wuxing[name] || 0;
          return (
            <div className="wuxing-bar" key={name}>
              <span>{name}</span>
              <i style={{ width: `${Math.max(8, value * 14)}%` }} />
              <em>{value}</em>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function DimensionCard({ dimension, index }: { dimension: Dimension; index: number }) {
  return (
    <article className="dimension-card">
      <div className="dimension-head">
        <span>0{index + 1}</span>
        <strong>{dimension.name}</strong>
        <em>{Math.round(dimension.confidence * 100)}%</em>
      </div>
      <p>{dimension.interpretation}</p>
      <div className="observations">
        {dimension.observations.map((item) => (
          <span key={item}>{item}</span>
        ))}
      </div>
      <div className="advice">先生建议：{dimension.advice}</div>
    </article>
  );
}

function getBaziChart(reading: Reading): BaziChart | null {
  const chart = reading.input_data?.chart;
  if (!chart || typeof chart !== "object" || Array.isArray(chart)) return null;
  return chart as BaziChart;
}

function getWuxingBalance(chart: BaziChart): Record<WuxingName, number> {
  const existing = normalizeWuxingBalance(chart.wuxing_balance);
  if (wuxingNames.some((name) => existing[name] > 0)) {
    return existing;
  }
  return countWuxingFromPillars(chart.pillars || {});
}

function normalizeWuxingBalance(value?: Record<string, number>): Record<WuxingName, number> {
  return wuxingNames.reduce(
    (result, name) => {
      result[name] = Number(value?.[name] || 0);
      return result;
    },
    { 木: 0, 火: 0, 土: 0, 金: 0, 水: 0 } as Record<WuxingName, number>,
  );
}

function countWuxingFromPillars(pillars: Record<string, string>): Record<WuxingName, number> {
  const counts = normalizeWuxingBalance();
  Object.values(pillars).forEach((pillar) => {
    if (!pillar || pillar === "时辰不详") return;
    Array.from(pillar).forEach((char) => {
      const element = stemWuxing[char] || branchWuxing[char];
      if (element) counts[element] += 1;
    });
  });
  return counts;
}

function SummaryList({ title, items }: { title: string; items: string[] }) {
  return (
    <article className="summary-list">
      <h4>{title}</h4>
      {items.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </article>
  );
}

function Stat({ label, value }: { label: string; value: number }) {
  return (
    <div className="stat">
      <strong>{value}</strong>
      <span>{label}</span>
    </div>
  );
}

function getScore(data?: ReportData | null) {
  if (!data?.dimensions?.length) return 68;
  const average = data.dimensions.reduce((sum, item) => sum + item.confidence, 0) / data.dimensions.length;
  const quality = data.quality_check?.confidence || 0.7;
  return Math.max(60, Math.min(96, Math.round((average * 0.65 + quality * 0.35) * 100)));
}

function formatDate(value: string) {
  return value.replace("T", " ").slice(0, 16);
}

function readViewFromPath(fallback: View): View {
  if (typeof window === "undefined") return "home";
  const segment = window.location.pathname.replace(/^\/+/, "").split("/")[0] || "home";
  return views.includes(segment as View) ? (segment as View) : fallback;
}

function pathForView(view: View) {
  return view === "home" ? "/" : `/${view}`;
}

function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}