/* Kay Construction — Client Portal.
   Public, read-only, no-login view a contractor shares via a tokenised link
   (#/portal/<projectId>?k=<token>). Clients see ONLY their own project's
   progress, milestones, and payment status — never internal cost / margin /
   expense data. Self-contained language toggle (does not touch app chrome). */

(function () {
  // local i18n so the portal never depends on the admin's stored language
  function PL(lang, id, en) { return lang === "en" ? en : id; }

  function waNum(phone) {
    if (!phone) return "";
    var d = String(phone).replace(/[^0-9]/g, "");
    if (d.indexOf("0") === 0) d = "62" + d.slice(1);
    else if (d.indexOf("62") !== 0 && d.length) d = "62" + d;
    return d;
  }

  // ---- progress ring (SVG) ----
  function Ring({ value, lang }) {
    var v = Math.max(0, Math.min(100, value || 0));
    var R = 58, C = 2 * Math.PI * R;
    return (
      <div className="pt-ring">
        <svg width="148" height="148" viewBox="0 0 148 148">
          <circle cx="74" cy="74" r={R} fill="none" stroke="var(--line)" strokeWidth="9" />
          <circle cx="74" cy="74" r={R} fill="none" stroke="var(--ink)" strokeWidth="9"
            strokeLinecap="round" strokeDasharray={C} strokeDashoffset={C * (1 - v / 100)}
            transform="rotate(-90 74 74)" style={{ transition: "stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)" }} />
        </svg>
        <div className="pt-ring-label">
          <div className="pt-ring-num tnum">{v}<span>%</span></div>
          <div className="pt-ring-cap">{PL(lang, "selesai", "complete")}</div>
        </div>
      </div>
    );
  }

  // ---- vertical milestone timeline ----
  function Timeline({ project, lang }) {
    var ms = S.all("milestones").filter(function (m) { return m.projectId === project.id; })
      .sort(function (a, b) { return (a.targetDate || "").localeCompare(b.targetDate || ""); });
    if (!ms.length) {
      return <div className="pt-empty">{PL(lang, "Belum ada tahapan yang dijadwalkan.", "No milestones scheduled yet.")}</div>;
    }
    var currentMarked = false;
    return (
      <div className="pt-timeline">
        {ms.map(function (m) {
          var state = "upcoming";
          if (m.done) state = "done";
          else if (!currentMarked) { state = "current"; currentMarked = true; }
          var days = m.targetDate ? S.daysBetween(S.todayISO(), m.targetDate) : null;
          var rel = "";
          if (m.done) rel = PL(lang, "Selesai", "Completed");
          else if (state === "current") rel = PL(lang, "Sedang dikerjakan", "In progress");
          else if (days !== null) rel = days < 0
            ? PL(lang, "Terlambat " + Math.abs(days) + " hari", Math.abs(days) + " days behind")
            : PL(lang, "Dijadwalkan", "Scheduled");
          return (
            <div key={m.id} className={"pt-step " + state}>
              <div className="pt-step-mark">
                {state === "done"
                  ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
                  : <span className="pt-dot" />}
              </div>
              <div className="pt-step-body">
                <div className="pt-step-title">{m.title}</div>
                <div className="pt-step-meta">
                  <span>{S.formatDate(m.targetDate, lang)}</span>
                  <span className={"pt-tag " + state}>{rel}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  // ---- payment status (client-facing only) ----
  function Payments({ project, fin, lang }) {
    var termins = S.terminsFor(project.id);
    var invoices = S.projectInvoices(project.id).filter(function (i) { return i.status !== "draft"; });
    var hasSchedule = termins.length > 0;

    function rowStatus(tm) {
      if (tm.invoiceId) {
        var inv = S.find("invoices", tm.invoiceId);
        if (inv) return S.invoiceStatus(inv);
        return "terkirim";
      }
      return "rencana";
    }
    function statusLabel(st) {
      var map = {
        "lunas": PL(lang, "Lunas", "Paid"),
        "lunas sebagian": PL(lang, "Sebagian", "Partial"),
        "terkirim": PL(lang, "Ditagih", "Invoiced"),
        "jatuh tempo": PL(lang, "Jatuh tempo", "Due"),
        "rencana": PL(lang, "Dijadwalkan", "Upcoming")
      };
      return map[st] || st;
    }
    var toneOf = { "lunas": "pos", "lunas sebagian": "warn", "jatuh tempo": "neg", "terkirim": "info", "rencana": "neutral" };

    return (
      <div>
        <div className="pt-pay-grid">
          <div className="pt-pay-cell">
            <div className="pt-pay-lbl">{PL(lang, "Nilai Kontrak", "Contract Value")}</div>
            <div className="pt-pay-val tnum">{S.formatRupiah(fin.contract)}</div>
          </div>
          <div className="pt-pay-cell">
            <div className="pt-pay-lbl">{PL(lang, "Sudah Dibayar", "Paid to Date")}</div>
            <div className="pt-pay-val tnum" style={{ color: "var(--pos)" }}>{S.formatRupiah(fin.diterima)}</div>
          </div>
          <div className="pt-pay-cell">
            <div className="pt-pay-lbl">{PL(lang, "Sisa Tagihan", "Outstanding")}</div>
            <div className="pt-pay-val tnum">{S.formatRupiah(Math.max(0, fin.sisaTagihan))}</div>
          </div>
        </div>

        {(hasSchedule || invoices.length > 0) && (
          <div className="pt-pay-table">
            <div className="pt-pay-head">
              <span>{PL(lang, "Termin", "Term")}</span>
              <span className="num">{PL(lang, "Jumlah", "Amount")}</span>
              <span className="st">{PL(lang, "Status", "Status")}</span>
            </div>
            {hasSchedule
              ? termins.map(function (tm) {
                  var st = rowStatus(tm);
                  return (
                    <div key={tm.id} className="pt-pay-row">
                      <span><b>{PL(lang, "Termin", "Term")} {tm.no}</b><em>{tm.desc}</em></span>
                      <span className="num tnum">{S.formatRupiah(tm.amount)}</span>
                      <span className="st"><i className={"pt-pill " + (toneOf[st] || "neutral")}>{statusLabel(st)}</i></span>
                    </div>
                  );
                })
              : invoices.map(function (inv) {
                  var st = S.invoiceStatus(inv);
                  return (
                    <div key={inv.id} className="pt-pay-row">
                      <span><b>{inv.terminDesc || PL(lang, "Invoice", "Invoice")}</b><em className="mono">{inv.number}</em></span>
                      <span className="num tnum">{S.formatRupiah(S.docTotals(inv).total)}</span>
                      <span className="st"><i className={"pt-pill " + (toneOf[st] || "neutral")}>{statusLabel(st)}</i></span>
                    </div>
                  );
                })}
          </div>
        )}
      </div>
    );
  }

  // ---- access denied ----
  function Denied({ lang }) {
    return (
      <div className="pt-shell" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
        <div className="pt-card pad" style={{ maxWidth: 420, textAlign: "center" }}>
          <img src="assets/kay-logo.png" alt="" style={{ width: 80, height: 80, objectFit: "contain", margin: "0 auto 14px" }} />
          <h2 className="serif" style={{ margin: "0 0 8px", fontSize: 22 }}>{PL(lang, "Tautan tidak valid", "Invalid link")}</h2>
          <p className="muted" style={{ margin: 0, fontSize: 13.5 }}>
            {PL(lang, "Tautan portal ini sudah tidak berlaku atau salah. Silakan hubungi kontraktor Anda untuk tautan terbaru.",
              "This portal link is no longer valid. Please contact your contractor for an up-to-date link.")}
          </p>
        </div>
      </div>
    );
  }

  // ---- main ----
  function ClientPortal({ id, token }) {
    var project = S.find("projects", id);
    var initial = project ? S.portalLang(id) : "id";
    var langState = React.useState(initial);
    var lang = langState[0], setLang = langState[1];

    if (!project || !S.portalValid(id, token)) return <Denied lang={lang} />;

    var co = S.getDB().company || {};
    var client = S.find("clients", project.clientId);
    var fin = S.projectFinancials(id);
    var ms = S.all("milestones").filter(function (m) { return m.projectId === id; });
    var doneCount = ms.filter(function (m) { return m.done; }).length;
    var wa = waNum(co.phone);

    var statusLabels = {
      prospek: PL(lang, "Prospek", "Prospect"), penawaran: PL(lang, "Penawaran", "Quoting"),
      berjalan: PL(lang, "Sedang Berjalan", "In Progress"), selesai: PL(lang, "Selesai", "Completed"),
      dibatalkan: PL(lang, "Dibatalkan", "Cancelled")
    };

    return (
      <div className="pt-shell">
        {/* top bar */}
        <header className="pt-top">
          <div className="pt-top-in">
            <div className="pt-brand">
              <img src="assets/kay-logo.png" alt="Kay Construction" />
              <div>
                <div className="pt-brand-word">KAY</div>
                <div className="pt-brand-sub">{PL(lang, "Portal Klien", "Client Portal")}</div>
              </div>
            </div>
            <div className="pt-seg">
              <button className={lang === "id" ? "on" : ""} onClick={function () { setLang("id"); }}>ID</button>
              <button className={lang === "en" ? "on" : ""} onClick={function () { setLang("en"); }}>EN</button>
            </div>
          </div>
        </header>

        <main className="pt-main">
          {/* hero */}
          <section className="pt-card pt-hero">
            <div className="pt-hero-info">
              <div className="pt-hero-eyebrow">
                <span className="mono">{project.code}</span>
                <span className={"pt-status s-" + project.status}>{statusLabels[project.status] || project.status}</span>
              </div>
              <h1 className="pt-hero-title serif">{project.name}</h1>
              <div className="pt-hero-meta">
                {client ? client.name : ""}{project.address ? " · " + project.address : ""}
              </div>
              <div className="pt-hero-dates">
                <div>
                  <span className="pt-k">{PL(lang, "Mulai", "Started")}</span>
                  <span className="pt-v">{S.formatDate(project.startDate, lang)}</span>
                </div>
                <div>
                  <span className="pt-k">{PL(lang, "Target Selesai", "Target Handover")}</span>
                  <span className="pt-v">{S.formatDate(project.targetDate, lang)}</span>
                </div>
                <div>
                  <span className="pt-k">{PL(lang, "Tahapan", "Milestones")}</span>
                  <span className="pt-v">{doneCount} / {ms.length} {PL(lang, "selesai", "done")}</span>
                </div>
              </div>
            </div>
            <div className="pt-hero-ring">
              <Ring value={project.progress} lang={lang} />
              <div className="pt-bar"><span style={{ width: Math.max(0, Math.min(100, project.progress)) + "%" }} /></div>
            </div>
          </section>

          {project.description && (
            <section className="pt-card pad pt-desc">
              <p>{project.description}</p>
            </section>
          )}

          <div className="pt-cols">
            {/* timeline */}
            <section className="pt-card">
              <div className="pt-card-head">
                <h2 className="serif">{PL(lang, "Perkembangan Pekerjaan", "Work Progress")}</h2>
              </div>
              <div className="pt-card-body">
                <Timeline project={project} lang={lang} />
              </div>
            </section>

            {/* payments */}
            <section className="pt-card">
              <div className="pt-card-head">
                <h2 className="serif">{PL(lang, "Status Pembayaran", "Payment Status")}</h2>
              </div>
              <div className="pt-card-body">
                <Payments project={project} fin={fin} lang={lang} />
              </div>
            </section>
          </div>

          {/* contact / footer */}
          <section className="pt-card pad pt-contact">
            <div>
              <div className="pt-contact-q serif">{PL(lang, "Ada pertanyaan tentang proyek Anda?", "Questions about your project?")}</div>
              <div className="muted" style={{ fontSize: 13 }}>
                {PL(lang, "Hubungi kami kapan saja — kami senang membantu.", "Reach out anytime — we're happy to help.")}
              </div>
            </div>
            <div className="pt-contact-actions">
              {wa && <a className="pt-btn primary" href={"https://wa.me/" + wa} target="_blank" rel="noopener">WhatsApp</a>}
              {co.email && <a className="pt-btn" href={"mailto:" + co.email}>{PL(lang, "Email", "Email")}</a>}
            </div>
          </section>

          <footer className="pt-foot">
            <div className="serif pt-foot-word">KAY CONSTRUCTION</div>
            <div>{co.legalName || co.ownerName} · {co.phone || ""}{co.email ? " · " + co.email : ""}</div>
            <div className="pt-foot-note">
              {PL(lang, "Diperbarui ", "Updated ")}{S.formatDate(S.todayISO(), lang)} · {PL(lang, "Portal Klien Kay Construction", "Kay Construction Client Portal")}
            </div>
          </footer>
        </main>
      </div>
    );
  }

  window.ClientPortal = ClientPortal;
})();