// ARS Registrations — list + detail
const { useState: useStateR } = React;

function RegistrationsList({ ctx }) {
  const { registrations, go, can, role } = ctx;
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [brand, setBrand] = React.useState("all");

  const statuses = [
    { id: "all", label: "All", count: registrations.length },
    { id: "active", label: "Active", count: registrations.filter(r=>r.status==="active").length },
    { id: "pending_approval", label: "Pending", count: registrations.filter(r=>r.status==="pending_approval").length },
    { id: "draft", label: "Draft", count: registrations.filter(r=>r.status==="draft").length },
  ];

  const visible = registrations.filter(r => {
    if (statusFilter !== "all" && r.status !== statusFilter) return false;
    if (brand !== "all" && r.product.brand !== brand) return false;
    if (q) {
      const hay = `${r.id} ${r.customer.company} ${r.product.serial} ${r.poNo} ${r.product.model}`.toLowerCase();
      if (!hay.includes(q.toLowerCase())) return false;
    }
    return true;
  });

  const brands = ["all", ...Array.from(new Set(registrations.map(r => r.product.brand)))];

  return (
    <div className="page">
      <div className="page__header">
        <div>
          <h1 className="page__title">ARS Registrations</h1>
          <p className="page__sub">{registrations.length} รายการทั้งหมด • ค้นหาด้วย ARS no., PO, ชื่อบริษัท หรือ Serial number</p>
        </div>
        <div className="page__actions">
          <button className="btn"><Icon name="filter" size={16}/> Advanced filter</button>
          <button className="btn"><Icon name="download" size={16}/> Export CSV</button>
          {can("create") && <button className="btn btn--primary" onClick={() => go("new")}><Icon name="plus" size={16}/> New Registration</button>}
        </div>
      </div>

      <div className="card">
        <div className="filter-row">
          {statuses.map(s => (
            <button key={s.id}
              className={"chip " + (statusFilter === s.id ? "is-active" : "")}
              onClick={() => setStatusFilter(s.id)}>
              {s.label} <span className="count">{s.count}</span>
            </button>
          ))}
          <div style={{ width: 1, height: 22, background: "var(--border)", margin: "0 6px" }}></div>
          <select className="input" style={{ width: "auto" }} value={brand} onChange={e => setBrand(e.target.value)}>
            {brands.map(b => <option key={b} value={b}>{b === "all" ? "All brands" : b}</option>)}
          </select>
          <div style={{ flex: 1 }}></div>
          <div className="topbar__search" style={{ margin: 0, width: 280 }}>
            <Icon name="search" size={16}/>
            <input placeholder="ค้นหา..." value={q} onChange={e => setQ(e.target.value)} />
          </div>
        </div>

        <div style={{ overflowX: "auto" }}>
          <table className="table">
            <thead>
              <tr>
                <th>ARS no.</th>
                <th>Register Date</th>
                <th>Customer</th>
                <th>Product / Model</th>
                <th>Serial</th>
                <th>Warranty End</th>
                <th>Status</th>
                <th>PO no.</th>
                <th style={{ width: 40 }}></th>
              </tr>
            </thead>
            <tbody>
              {visible.map(r => {
                const days = window.daysUntil(r.warranty.end);
                return (
                  <tr key={r.id} className="clickable" onClick={() => go("registrations", r.id)}>
                    <td className="mono">
                      {r.arsNo
                        ? r.arsNo
                        : <span className="badge badge--draft" style={{ fontSize: 11 }}>รอ Customer</span>}
                    </td>
                    <td>{window.fmtDate(r.registerDate)}</td>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <div className="avatar" style={{ background: "var(--jt-navy-700)", width: 26, height: 26, fontSize: 10 }}>
                          {(r.customer.company || "?").slice(0, 2).toUpperCase()}
                        </div>
                        <div>
                          <div style={{ fontWeight: 500 }}>{r.customer.company}</div>
                          <div className="muted small">{r.customer.province}</div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div style={{ fontWeight: 500 }}>{r.product.brand}</div>
                      <div className="muted small">{r.product.model}</div>
                    </td>
                    <td className="mono">{r.product.serial}</td>
                    <td>
                      {window.fmtDate(r.warranty.end)}
                      {r.status === "active" && days >= 0 && days < 365 && <span className="badge badge--pending" style={{ marginLeft: 6, padding: "1px 7px" }}>{days}d</span>}
                    </td>
                    <td><window.StatusBadge status={r.status} /></td>
                    <td className="mono small">{r.poNo}</td>
                    <td><Icon name="chevron-right" size={16} className="muted"/></td>
                  </tr>
                );
              })}
              {visible.length === 0 && (
                <tr><td colSpan="9" style={{ textAlign: "center", padding: 36, color: "var(--text-muted)" }}>ไม่พบรายการที่ตรงกับการค้นหา</td></tr>
              )}
            </tbody>
          </table>
        </div>

        <div style={{ padding: "12px 16px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", color: "var(--text-muted)", fontSize: 12.5 }}>
          <span>แสดง {visible.length} จาก {registrations.length} รายการ</span>
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            <button className="btn btn--sm btn--ghost"><Icon name="chevron-left" size={14}/></button>
            <span>1 / 1</span>
            <button className="btn btn--sm btn--ghost"><Icon name="chevron-right" size={14}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function RegistrationDetail({ ctx }) {
  const { registrations, setRegistrations, selectedId, go, can, role } = ctx;
  const r = registrations.find(x => x.id === selectedId);
  if (!r) return <div className="page"><p>ไม่พบรายการ</p></div>;

  const [poUploading, setPoUploading] = React.useState(false);
  const [poUploadErr, setPoUploadErr] = React.useState(null);

  const handlePoUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file || !window.sb) return;
    setPoUploading(true);
    setPoUploadErr(null);
    const ext = file.name.split('.').pop() || 'pdf';
    const safePo = (r.poNo || r.id).replace(/[^a-zA-Z0-9_-]/g, '_');
    const path = `${safePo}/${Date.now()}.${ext}`;
    const { error: upErr } = await window.sb.storage
      .from('po-files')
      .upload(path, file, { contentType: file.type || 'application/pdf', upsert: true });
    if (upErr) {
      setPoUploadErr(upErr.message);
      setPoUploading(false);
      return;
    }
    const { data: urlData } = window.sb.storage.from('po-files').getPublicUrl(path);
    const newUrl = urlData?.publicUrl || null;
    const { error: dbErr } = await window.sb.from('ars_registrations')
      .update({ po_file_url: newUrl })
      .eq('id', r.id);
    if (dbErr) { setPoUploadErr(dbErr.message); setPoUploading(false); return; }
    setRegistrations(registrations.map(x => x.id === r.id ? { ...x, poFileUrl: newUrl } : x));
    setPoUploading(false);
  };

  const days = window.daysUntil(r.warranty.end);

  return (
    <div className="page">
      <div className="page__header">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
            <button className="btn btn--ghost btn--sm" onClick={() => go("registrations")}><Icon name="chevron-left" size={14}/> Back to list</button>
            <window.StatusBadge status={r.status} />
            {r.certificateIssued && <span className="badge badge--info">Certificate issued</span>}
          </div>
          <h1 className="page__title" style={{ fontFamily: "var(--font-mono)", fontSize: 22 }}>
            {r.arsNo || <span style={{ color: "var(--text-muted)", fontSize: 16 }}>รอ Customer Update <span style={{ fontSize: 13 }}>(Draft: {r.id})</span></span>}
          </h1>
          <p className="page__sub">{r.customer.company} • Registered {window.fmtDate(r.registerDate)} by {r.createdBy}</p>
        </div>
        <div className="page__actions">
          {r.certificateIssued && (
            <>
              <button className="btn"><Icon name="download" size={16}/> Download Certificate</button>
              <button className="btn btn--primary" onClick={() => { ctx.go("certificates", r.id); }}>
                <Icon name="external" size={16}/> View Certificate
              </button>
            </>
          )}
          {!r.certificateIssued && r.status === "draft" && <button className="btn btn--primary"><Icon name="send" size={16}/> Continue & Submit</button>}
          {can("edit_all") && <button className="btn"><Icon name="edit" size={16}/> Edit</button>}
          {can("manage_master") && <button className="btn"><Icon name="more" size={16}/></button>}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* Customer info */}
          <div className="card">
            <div className="card__header">
              <h3 className="card__title">Customer Information</h3>
              {can("edit_all") && <button className="btn btn--ghost btn--sm"><Icon name="edit" size={13}/> Edit</button>}
            </div>
            <div className="card__body">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: "16px 28px" }}>
                <FieldDisplay label="Company name" value={r.customer.company} />
                <FieldDisplay label="Contact person" value={r.customer.contact} />
                <FieldDisplay label="Address" value={`${r.customer.address}, ${r.customer.province} ${r.customer.zip}`} span={2} />
                <FieldDisplay label="Tel." value={r.customer.tel1} />
                <FieldDisplay label="Email" value={r.customer.email1} />
                {r.customer.email2 && <FieldDisplay label="Email 2" value={r.customer.email2} />}
              </div>
            </div>
          </div>

          {/* Product + Warranty */}
          <div className="card">
            <div className="card__header">
              <h3 className="card__title">Product & Warranty</h3>
              <span className="badge badge--solid">{r.warranty.years} ปี</span>
            </div>
            <div className="card__body">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "16px 28px" }}>
                <FieldDisplay label="Brand" value={r.product.brand} />
                <FieldDisplay label="Model" value={r.product.model} />
                <FieldDisplay label="Serial number" value={r.product.serial} mono />
                <FieldDisplay label="Warranty package" value={r.warranty.package} mono />
                <FieldDisplay label="Service zone" value={r.warranty.zone} />
                <FieldDisplay label="Installation location" value={r.installationLocation} />
              </div>
              <div className="divider"></div>
              {/* Warranty visual bar */}
              <WarrantyBar start={r.warranty.start} end={r.warranty.end} years={r.warranty.years} days={days} />
            </div>
          </div>

          {/* Purchase Order */}
          <div className="card">
            <div className="card__header">
              <h3 className="card__title">Purchase Order</h3>
              <span className="muted small">Attached by {r.createdBy}</span>
            </div>
            <div className="card__body">
              <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "10px 12px", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 8 }}>
                <div style={{ width: 40, height: 50, background: "var(--jt-red-50)", border: "1px solid #f3c1cd", borderRadius: 6, display: "grid", placeItems: "center", color: "var(--jt-red)" }}>
                  <Icon name="file" size={20} />
                </div>
                <div style={{ flex: 1 }}>
                  <strong>{r.poNo}{r.poFileUrl ? '.pdf' : ''}</strong>
                  <div className="muted small">PO Date {window.fmtDate(r.poDate)} • Payment: <strong>{r.payment}</strong></div>
                </div>
                {r.poFileUrl ? (
                  <>
                    <a className="btn btn--sm" href={r.poFileUrl} download={`${r.poNo}.pdf`} target="_blank" rel="noreferrer">
                      <Icon name="download" size={14}/> Download
                    </a>
                    <a className="btn btn--sm" href={r.poFileUrl} target="_blank" rel="noreferrer">
                      <Icon name="external" size={14}/> View
                    </a>
                  </>
                ) : (
                  <label className="btn btn--sm btn--primary" style={{ cursor: 'pointer', opacity: poUploading ? 0.6 : 1 }}>
                    {poUploading
                      ? <><Icon name="clock" size={14}/> กำลัง Upload…</>
                      : <><Icon name="upload" size={14}/> Upload PO</>}
                    <input type="file" style={{ display: 'none' }} accept=".pdf,.jpg,.jpeg,.png" disabled={poUploading} onChange={handlePoUpload}/>
                  </label>
                )}
                {poUploadErr && <span style={{ fontSize: 11, color: 'var(--jt-red)', marginLeft: 8 }}>{poUploadErr}</span>}
              </div>
              {r.remark && r.remark !== "Collected" && (
                <div className="note" style={{ marginTop: 12 }}>
                  <Icon name="tag" size={14}/>
                  <div>Remark: {r.remark}</div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* Status timeline */}
          <div className="card">
            <div className="card__header"><h3 className="card__title">Status Timeline</h3></div>
            <div className="card__body">
              <ul className="timeline">
                <li>
                  <span className="dot green"></span>
                  <div className="body">
                    <strong>Created</strong>
                    <span className="muted small" style={{display:"block"}}>by {r.createdBy}</span>
                    <span className="ts">{r.registerDate}</span>
                  </div>
                </li>
                <li>
                  <span className={"dot " + (r.status !== "draft" ? "green" : "gray")}></span>
                  <div className="body">
                    <strong>Submitted for approval</strong>
                    <span className="muted small" style={{display:"block"}}>{r.submittedAt || (r.status === "draft" ? "—" : window.fmtDate(r.registerDate))}</span>
                  </div>
                </li>
                <li>
                  <span className={"dot " + (r.approvedBy ? "green" : "gray")}></span>
                  <div className="body">
                    <strong>Approved</strong>
                    <span className="muted small" style={{display:"block"}}>{r.approvedBy || "—"}</span>
                    <span className="ts">{r.approvedAt || "—"}</span>
                  </div>
                </li>
                <li>
                  <span className={"dot " + (r.certificateIssued ? "green" : "gray")}></span>
                  <div className="body">
                    <strong>Certificate generated</strong>
                    <span className="muted small" style={{display:"block"}}>{r.certificateIssued ? "PDF available for download" : "Waiting"}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          {/* Linked items */}
          <div className="card">
            <div className="card__header"><h3 className="card__title">Related</h3></div>
            <div className="card__body">
              <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
                <a className="spread" style={{ padding: 8, borderRadius: 6, color: "var(--text)", textDecoration: "none", background: "var(--surface-2)" }}>
                  <span><Icon name="cert" size={14}/> Certificate PDF</span>
                  <Icon name="chevron-right" size={14}/>
                </a>
                <a className="spread" style={{ padding: 8, borderRadius: 6, color: "var(--text)", textDecoration: "none" }}>
                  <span><Icon name="file" size={14}/> PO Document</span>
                  <Icon name="chevron-right" size={14}/>
                </a>
                <a className="spread" style={{ padding: 8, borderRadius: 6, color: "var(--text)", textDecoration: "none" }}>
                  <span><Icon name="database" size={14}/> Warranty package details</span>
                  <Icon name="chevron-right" size={14}/>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FieldDisplay({ label, value, mono, span }) {
  return (
    <div style={{ gridColumn: span === 2 ? "span 2" : undefined }}>
      <div className="muted small" style={{ marginBottom: 3 }}>{label}</div>
      <div className={mono ? "mono" : ""} style={{ fontSize: 14, fontWeight: mono ? 500 : 400 }}>{value || "—"}</div>
    </div>
  );
}

function WarrantyBar({ start, end, years, days }) {
  // Calculate progress %
  const startMs = new Date(start).getTime();
  const endMs = new Date(end).getTime();
  const now = Date.now();
  const pct = isFinite(startMs) && isFinite(endMs) && endMs > startMs
    ? Math.max(0, Math.min(100, ((now - startMs) / (endMs - startMs)) * 100))
    : 0;
  return (
    <div>
      <div className="spread" style={{ marginBottom: 8 }}>
        <div><strong>{window.fmtDate(start)}</strong><span className="muted small" style={{ marginLeft: 6 }}>Start</span></div>
        <div style={{ textAlign: "center" }}>
          <strong>{Math.max(0, days)} วัน</strong>
          <span className="muted small" style={{ display: "block" }}>เหลือก่อนหมดอายุ</span>
        </div>
        <div style={{ textAlign: "right" }}><strong>{window.fmtDate(end)}</strong><span className="muted small" style={{ marginLeft: 6 }}>End</span></div>
      </div>
      <div style={{ position: "relative", height: 12, borderRadius: 6, background: "var(--surface-2)", border: "1px solid var(--border)", overflow: "hidden" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${pct}%`, background: "linear-gradient(90deg, var(--jt-navy-700), var(--jt-navy-600))" }}></div>
        <div style={{ position: "absolute", left: `${pct}%`, top: -3, width: 2, height: 18, background: "var(--jt-red)" }}></div>
      </div>
      <div className="muted small" style={{ marginTop: 6 }}>เริ่ม {window.fmtDate(start)} → สิ้นสุด {window.fmtDate(end)} ({years} ปี)</div>
    </div>
  );
}

window.RegistrationsList = RegistrationsList;
window.RegistrationDetail = RegistrationDetail;