// Thaipat Quotation — App shell

const { useEffect } = React;

const API_BASE = "https://quotation.thaipatmetal.com";

function App() {
  const [mode, setMode] = useState("quotation");
  const [data, setData] = useState(() => defaultData("quotation"));
  const [status, setStatus] = useState("idle");
  const [downloadUrl, setDownloadUrl] = useState(null);
  const [errorMsg, setErrorMsg] = useState("");

  const switchMode = (newMode) => {
    setMode(newMode);
    setData(defaultData(newMode));
  };

  const isFormValid = () => {
    if (!data.customerName.trim()) return false;
    if (!data.documentNumber.trim()) return false;
    if (!data.documentDate) return false;
    const validItems = data.items.filter(i => i.description.trim());
    if (validItems.length === 0) return false;
    return true;
  };

  const buildPayload = () => {
    const validItems = data.items
      .filter(i => i.description.trim())
      .map((item, idx) => ({
        itemNo: idx + 1,
        description: item.description,
        qty: parseFloat(item.qty) || 1,
        unit: item.unit || "ชิ้น",
        unitPrice: item.unitPrice || "0.00",
        amount: item.amount || "0.00",
      }));

    const totals = calcTotals(validItems, data.discount, data.vatRate);

    const base = {
      customerName: data.customerName,
      customerAddress: data.customerAddress || data.customerName,
      customerPhone: data.customerPhone || "-",
      customerEmail: data.customerEmail || "-",
      salesPerson: data.salesPerson || "-",
      items: validItems,
      subtotal: totals.subtotal,
      discount: totals.discount,
      vatRate: data.vatRate,
      vatAmount: totals.vatAmount,
      grandTotal: totals.grandTotal,
      notes: data.notes.filter(n => n.trim()),
    };

    if (mode === "invoice") {
      return {
        invoice: {
          invoiceNumber: data.documentNumber,
          invoiceDate: data.documentDate,
          customerTaxId: data.customerTaxId || "",
          ...base,
        },
      };
    }
    return {
      quotation: {
        quotationNumber: data.documentNumber,
        quotationDate: data.documentDate,
        validUntil: data.validUntil || 30,
        ...base,
      },
    };
  };

  const handleGenerate = async () => {
    if (!isFormValid()) {
      setErrorMsg("กรุณากรอกข้อมูลให้ครบถ้วน: ชื่อลูกค้า, เลขที่เอกสาร, วันที่, และรายการสินค้าอย่างน้อย 1 รายการ");
      return;
    }
    setStatus("loading");
    setErrorMsg("");
    const payload = buildPayload();
    const endpoint = mode === "invoice"
      ? `${API_BASE}/api/invoice/request`
      : `${API_BASE}/api/quotation/request`;

    try {
      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const text = await res.text();
        throw new Error(`Server error: ${res.status} ${text}`);
      }

      const json = await res.json();
      if (!json.success || !json.jobId) {
        throw new Error("Invalid response from server");
      }

      const statusUrl = json.statusUrl;
      const downloadUrlFromApi = json.downloadUrl;
      pollUntilReady(statusUrl, downloadUrlFromApi);
    } catch (err) {
      setErrorMsg(`เกิดข้อผิดพลาด: ${err.message}`);
      setStatus("error");
    }
  };

  const pollUntilReady = (statusUrl, dlUrl) => {
    const maxAttempts = 60;
    let attempts = 0;

    const poll = () => {
      attempts++;
      fetch(`${API_BASE}${statusUrl}`)
        .then(res => res.json())
        .then(json => {
          if (json.status === "ready" && json.downloadUrl) {
            setDownloadUrl(`${API_BASE}${json.downloadUrl}`);
            setStatus("ready");
            window.open(`${API_BASE}${json.downloadUrl}`, "_blank");
          } else if (attempts >= maxAttempts) {
            setErrorMsg("หมดเวลาในการสร้าง PDF กรุณาลองใหม่อีกครั้ง");
            setStatus("error");
          } else {
            setTimeout(poll, 2000);
          }
        })
        .catch(() => {
          if (attempts >= maxAttempts) {
            setErrorMsg("ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ กรุณาตรวจสอบการเชื่อมต่อ");
            setStatus("error");
          } else {
            setTimeout(poll, 2000);
          }
        });
    };
    setTimeout(poll, 2000);
  };

  const handleDownload = () => {
    if (downloadUrl) {
      const a = document.createElement("a");
      a.href = downloadUrl;
      a.download = `${data.documentNumber}.pdf`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  };

  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, [data, status]);

  const docLabel = mode === "invoice" ? "ใบกำกับภาษี" : "ใบเสนอราคา";

  return (
    <React.Fragment>
      <header className="app-header">
        <div className="app-header__inner">
          <AppLogo />
          <span className="app-header__title">สร้าง{docLabel}</span>
        </div>
      </header>

      <div className="app-modes">
        <button
          className={"app-mode" + (mode === "quotation" ? " is-active" : "")}
          onClick={() => switchMode("quotation")}>
          ใบเสนอราคา
        </button>
        <button
          className={"app-mode" + (mode === "invoice" ? " is-active" : "")}
          onClick={() => switchMode("invoice")}>
          ใบกำกับภาษี
        </button>
      </div>

      <main className="app-main">
        <QuotationForm mode={mode} data={data} onChange={setData} />

        <div className="submit-row">
          <Button variant="ghost" onClick={() => setData(defaultData(mode))}>
            ล้างฟอร์ม
          </Button>
          <Button variant="primary" arrow onClick={handleGenerate}>
            ดาวน์โหลด PDF
          </Button>
        </div>

        {errorMsg && (
          <div style={{
            border: "1px solid var(--error-500)",
            padding: 12,
            marginTop: 16,
            color: "var(--error-500)",
            fontFamily: "var(--font-mono)",
            fontSize: "var(--fs-small)",
          }}>
            {errorMsg}
          </div>
        )}
      </main>

      {status === "loading" && (
        <div className="overlay">
          <div className="overlay__box">
            <Spinner />
            <h3 className="overlay__title">กำลังสร้าง PDF</h3>
            <p className="overlay__msg">ระบบกำลังสร้าง{docLabel} PDF<br/>กรุณารอสักครู่...</p>
          </div>
        </div>
      )}

      {status === "ready" && (
        <div className="overlay">
          <div className="overlay__box">
            <div className="overlay__check">✓</div>
            <h3 className="overlay__title">สร้าง PDF สำเร็จ</h3>
            <p className="overlay__msg">ไฟล์ PDF {docLabel} พร้อมดาวน์โหลดแล้ว<br/>หากไม่เริ่มดาวน์โหลดอัตโนมัติ กดปุ่มด้านล่าง</p>
            <Button variant="primary" onClick={handleDownload}>ดาวน์โหลด PDF →</Button>
            <br/>
            <button
              onClick={() => { setData(defaultData(mode)); setStatus("idle"); setDownloadUrl(null); }}
              style={{
                display: "inline-block",
                marginTop: 16,
                background: "none",
                border: 0,
                cursor: "pointer",
                fontFamily: "var(--font-sans)",
                fontSize: "var(--fs-small)",
                color: "var(--fg-soft)",
                textDecoration: "underline",
              }}>
              สร้างใหม่
            </button>
          </div>
        </div>
      )}

      {status === "error" && (
        <div className="overlay">
          <div className="overlay__box">
            <h3 className="overlay__title">เกิดข้อผิดพลาด</h3>
            <p className="overlay__msg" style={{ color: "var(--error-500)" }}>{errorMsg}</p>
            <Button variant="primary" onClick={() => { setStatus("idle"); setDownloadUrl(null); setErrorMsg(""); }}>ลองใหม่</Button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);