// ============================================
// app.jsx — Login screen, main App, render
// ============================================

// Tukar ke false untuk matikan login sementara (cth: masa develop UI)
const REQUIRE_LOGIN = true

function LoginScreen({ onLogin, companyLogo }) {
    const [password, setPassword] = useState("")
    const [error, setError] = useState(false)

    const handleSubmit = (e) => {
        e.preventDefault()
        if (password === "2025") {
            sessionStorage.setItem("cs_authenticated", "true")
            onLogin()
        } else {
            setError(true)
            setPassword("")
        }
    }

    return (
        <div
            style={{
                minHeight: "100vh",
                width: "100%",
                background:
                    "radial-gradient(1000px 500px at 80% -10%, rgba(249,115,22,.18), transparent 60%), radial-gradient(800px 400px at 0% 110%, rgba(37,99,235,.14), transparent 55%), linear-gradient(160deg, #0F172A 0%, #1E293B 100%)",
                fontFamily: "'Inter', system-ui, sans-serif",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: 16,
                boxSizing: "border-box",
            }}
        >
            <div
                style={{
                    backgroundColor: "#FFF",
                    borderRadius: 20,
                    padding: "36px 32px",
                    width: "100%",
                    maxWidth: 380,
                    boxShadow: "0 24px 60px rgba(2,6,23,.45)",
                    boxSizing: "border-box",
                }}
            >
                <div style={{ textAlign: "center", marginBottom: 26 }}>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "center",
                            marginBottom: 16,
                        }}
                    >
                        <LogoDisplay
                            logo={companyLogo}
                            size={72}
                            bgColor="#FFF7ED"
                            textColor="#F97316"
                            rounded={18}
                        />
                    </div>
                    <div
                        style={{
                            fontSize: 21,
                            fontWeight: 800,
                            color: "#0F172A",
                            letterSpacing: 0.2,
                        }}
                    >
                        {companyInfo.name}
                    </div>
                    <div
                        style={{
                            fontSize: 12.5,
                            color: "#94A3B8",
                            marginTop: 4,
                            fontWeight: 500,
                        }}
                    >
                        Quotation & Invoice Dashboard
                    </div>
                </div>

                <form onSubmit={handleSubmit}>
                    <div style={{ marginBottom: 16 }}>
                        <label
                            style={{
                                display: "block",
                                fontSize: 12.5,
                                fontWeight: 600,
                                color: "#334155",
                                marginBottom: 6,
                            }}
                        >
                            Password
                        </label>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => {
                                setPassword(e.target.value)
                                setError(false)
                            }}
                            placeholder="Masukkan password"
                            style={{
                                width: "100%",
                                padding: "13px 15px",
                                borderRadius: 12,
                                border: error
                                    ? "1px solid #EF4444"
                                    : "1px solid #E2E8F0",
                                fontSize: 15,
                                outline: "none",
                                boxSizing: "border-box",
                                backgroundColor: "#F8FAFC",
                            }}
                            autoFocus
                        />
                        {error && (
                            <div
                                style={{
                                    color: "#EF4444",
                                    fontSize: 12,
                                    marginTop: 6,
                                    fontWeight: 500,
                                }}
                            >
                                Password salah. Sila cuba lagi.
                            </div>
                        )}
                    </div>

                    <button
                        type="submit"
                        className="cs-btn"
                        style={{
                            width: "100%",
                            padding: 14,
                            borderRadius: 12,
                            border: "none",
                            background:
                                "linear-gradient(135deg, #F97316, #EA580C)",
                            color: "#FFF",
                            fontWeight: 700,
                            fontSize: 15,
                            cursor: "pointer",
                            boxShadow: "0 8px 20px rgba(249,115,22,.35)",
                        }}
                    >
                        Log Masuk
                    </button>
                </form>

                <div
                    style={{
                        textAlign: "center",
                        marginTop: 20,
                        fontSize: 11,
                        color: "#CBD5E1",
                        fontWeight: 500,
                    }}
                >
                    {companyInfo.name} {companyInfo.tagline} • {companyInfo.ssm}
                </div>
            </div>
        </div>
    )
}

function App({ companyLogo }) {
    const [isAuthenticated, setIsAuthenticated] = useState(() => {
        if (!REQUIRE_LOGIN) return true
        return sessionStorage.getItem("cs_authenticated") === "true"
    })
    const [view, setView] = useState("admin")
    const [quotations, setQuotations] = useState([])
    const [invoices, setInvoices] = useState([])
    const [selectedItem, setSelectedItem] = useState(null)
    const [convertingQuotation, setConvertingQuotation] = useState(null)
    const [loading, setLoading] = useState(true)
    const [saving, setSaving] = useState(false)
    const [isPublicView, setIsPublicView] = useState(false)
    const [shareError, setShareError] = useState(false)

    // Kod pendek dari laluan /s/<kod>
    const getShareCodeFromPath = () => {
        const m = window.location.pathname.match(/^\/s\/([A-Za-z0-9]+)\/?$/)
        return m ? m[1] : null
    }

    // Sokong juga format lama ?quotation=... / ?invoice=...
    const checkUrlParams = () => {
        const params = new URLSearchParams(window.location.search)
        return {
            quotationId: params.get("quotation"),
            invoiceId: params.get("invoice"),
            shareCode: getShareCodeFromPath(),
        }
    }

    const isSharedLink = () => {
        const { quotationId, invoiceId, shareCode } = checkUrlParams()
        return quotationId || invoiceId || shareCode
    }

    useEffect(() => {
        if (isSharedLink()) {
            setIsAuthenticated(true)
            loadData()
        } else if (isAuthenticated) {
            loadData()
        }
    }, [isAuthenticated])

    if (REQUIRE_LOGIN && !isAuthenticated && !isSharedLink()) {
        return (
            <LoginScreen
                onLogin={() => setIsAuthenticated(true)}
                companyLogo={companyLogo}
            />
        )
    }

    const loadData = async () => {
        setLoading(true)
        try {
            const { quotationId, invoiceId, shareCode } = checkUrlParams()

            // Pautan kongsi pendek: ambil SATU dokumen sahaja (tanpa login,
            // dan tanpa mendedahkan senarai penuh kepada klien)
            if (shareCode) {
                const res = await api.getShared(shareCode)
                if (res.success && res.data) {
                    setSelectedItem(res.data)
                    setView(res.type === "invoice" ? "invoice" : "quotation")
                    setIsPublicView(true)
                } else {
                    setShareError(true)
                }
                setLoading(false)
                return
            }

            const [qRes, iRes] = await Promise.all([
                api.getQuotations(),
                api.getInvoices(),
            ])

            if (qRes.success) setQuotations(qRes.data || [])
            if (iRes.success) setInvoices(iRes.data || [])

            if (quotationId && qRes.success) {
                const q = (qRes.data || []).find(
                    (q) => q.id === "#" + quotationId || q.id === quotationId
                )
                if (q) {
                    setSelectedItem(q)
                    setView("quotation")
                    setIsPublicView(true)
                }
            }

            if (invoiceId && iRes.success) {
                const inv = (iRes.data || []).find(
                    (i) => i.id === "#" + invoiceId || i.id === invoiceId
                )
                if (inv) {
                    setSelectedItem(inv)
                    setView("invoice")
                    setIsPublicView(true)
                }
            }
        } catch (error) {
            console.error("Error loading data:", error)
            setQuotations(initialQuotations)
            setInvoices(initialInvoices)
        }
        setLoading(false)
    }

    // Pautan pendek & kemas: https://domain/s/kod7huruf
    const getShareLink = (item) =>
        `${window.location.origin}/s/${item.shareCode}`

    const copyShareLink = (item) => {
        if (!item.shareCode) {
            alert(
                "Dokumen ini belum ada kod kongsi.\nSimpan (Edit → Save) sekali untuk menjananya."
            )
            return
        }
        const link = getShareLink(item)
        navigator.clipboard.writeText(link)
        alert("Pautan disalin!\n\n" + link)
    }

    const saveQuotation = async (quotation) => {
        setSaving(true)
        try {
            // API upsert ikut id; ia pulangkan dokumen yang BENAR-BENAR tersimpan
            const res = await api.saveQuotationDoc(quotation)

            if (!res || res.success === false) {
                alert(
                    `Gagal simpan quotation.\n\n${(res && res.error) || "Ralat tidak diketahui"}`
                )
                setSaving(false)
                return
            }

            const saved = res.data
            const tersimpan =
                saved &&
                String(saved.project || "") === String(quotation.project || "") &&
                Number(saved.total || 0) === Number(quotation.total || 0)

            if (!tersimpan) {
                alert(
                    "Amaran: data yang dipulangkan server tidak sepadan dengan yang dihantar.\n" +
                        "Sila semak semula dokumen ini."
                )
            }

            await loadData()
        } catch (error) {
            console.error("Error saving quotation:", error)
            alert("Gagal simpan quotation: " + error.message)
            setSaving(false)
            return
        }
        setSaving(false)
        setView("admin")
    }

    const saveInvoice = async (invoice) => {
        setSaving(true)
        try {
            const exists = invoices.find((i) => i.id === invoice.id)
            const res = exists
                ? await api.updateInvoice(invoice)
                : await api.createInvoice(invoice)

            if (res && res.success === false) {
                alert(
                    `Gagal simpan invoice.\n\n${res.error || "Ralat tidak diketahui"}`
                )
                setSaving(false)
                return
            }
            await loadData()
        } catch (error) {
            console.error("Error saving invoice:", error)
            alert("Gagal simpan invoice: " + error.message)
            setSaving(false)
            return
        }
        setSaving(false)
        setConvertingQuotation(null)
        setView("admin")
    }

    const markInvoicePaid = async (invoice) => {
        const updated = { ...invoice, status: "paid" }
        try {
            await api.updateInvoice(updated)
            setInvoices(
                invoices.map((i) => (i.id === invoice.id ? updated : i))
            )
            setSelectedItem(updated)
        } catch (error) {
            console.error("Error marking paid:", error)
        }
    }

    const markDepositPaid = async (invoice) => {
        const updated = {
            ...invoice,
            deposit: {
                ...invoice.deposit,
                status: "paid",
                paidDate:
                    invoice.deposit.date ||
                    new Date().toISOString().split("T")[0],
            },
        }
        try {
            await api.updateInvoice(updated)
            setInvoices(
                invoices.map((i) => (i.id === invoice.id ? updated : i))
            )
            setSelectedItem(updated)
        } catch (error) {
            console.error("Error marking deposit paid:", error)
        }
    }

    const updateQuotationStatus = async (quotation, newStatus) => {
        const updated = { ...quotation, status: newStatus }
        try {
            await api.updateQuotation(updated)
            setQuotations(
                quotations.map((q) => (q.id === quotation.id ? updated : q))
            )
            setSelectedItem(updated)
        } catch (error) {
            console.error("Error updating status:", error)
        }
    }

    const updateInvoiceStatus = async (invoice, newStatus) => {
        const updated = { ...invoice, status: newStatus }
        try {
            await api.updateInvoice(updated)
            setInvoices(
                invoices.map((i) => (i.id === invoice.id ? updated : i))
            )
            setSelectedItem(updated)
        } catch (error) {
            console.error("Error updating status:", error)
        }
    }

    const convertToInvoice = (quotation) => {
        setConvertingQuotation(quotation)
        setView("newInvoice")
    }

    const deleteQuotation = async (quotation) => {
        const ok = window.confirm(
            `Padam quotation ${quotation.id} (${quotation.client})?\n\nTindakan ini tidak boleh dibatalkan.`
        )
        if (!ok) return
        try {
            await api.deleteQuotation(quotation.id)
            setQuotations(quotations.filter((q) => q.id !== quotation.id))
            setSelectedItem(null)
            setView("admin")
        } catch (error) {
            console.error("Error deleting quotation:", error)
            alert("Gagal padam quotation. Sila cuba lagi.")
        }
    }

    const deleteInvoice = async (invoice) => {
        const ok = window.confirm(
            `Padam invoice ${invoice.id} (${invoice.client})?\n\nTindakan ini tidak boleh dibatalkan.`
        )
        if (!ok) return
        try {
            await api.deleteInvoice(invoice.id)
            setInvoices(invoices.filter((i) => i.id !== invoice.id))
            setSelectedItem(null)
            setView("admin")
        } catch (error) {
            console.error("Error deleting invoice:", error)
            alert("Gagal padam invoice. Sila cuba lagi.")
        }
    }

    if (shareError) {
        return (
            <div
                style={{
                    minHeight: "100vh",
                    width: "100%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    padding: 24,
                    boxSizing: "border-box",
                    background:
                        "linear-gradient(160deg, #0F172A 0%, #1E293B 100%)",
                    fontFamily: "'Inter', system-ui, sans-serif",
                }}
            >
                <div
                    style={{
                        backgroundColor: "#FFF",
                        borderRadius: 18,
                        padding: "34px 30px",
                        maxWidth: 380,
                        width: "100%",
                        textAlign: "center",
                        boxShadow: "0 20px 50px rgba(2,6,23,.4)",
                    }}
                >
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "center",
                            marginBottom: 14,
                        }}
                    >
                        <LogoDisplay
                            logo={companyLogo}
                            size={60}
                            bgColor="#FFF7ED"
                            textColor="#F97316"
                            rounded={15}
                        />
                    </div>
                    <div
                        style={{
                            fontSize: 17,
                            fontWeight: 800,
                            color: "#0F172A",
                        }}
                    >
                        Pautan tidak sah
                    </div>
                    <div
                        style={{
                            fontSize: 13,
                            color: "#64748B",
                            marginTop: 8,
                            lineHeight: 1.65,
                        }}
                    >
                        Dokumen ini tidak dijumpai atau pautannya telah ditarik
                        balik. Sila hubungi kami untuk pautan terkini.
                    </div>
                    <div
                        style={{
                            marginTop: 16,
                            fontSize: 12,
                            color: "#94A3B8",
                        }}
                    >
                        {companyInfo.name} · {companyInfo.phone}
                    </div>
                </div>
            </div>
        )
    }

    if (loading) {
        return (
            <div
                style={{
                    minHeight: "100vh",
                    width: "100%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "#F3F4F6",
                    fontFamily: "system-ui, sans-serif",
                }}
            >
                <div style={{ textAlign: "center" }}>
                    <div
                        style={{
                            width: 48,
                            height: 48,
                            border: "4px solid #E5E7EB",
                            borderTopColor: "#F97316",
                            borderRadius: "50%",
                            animation: "spin 1s linear infinite",
                            margin: "0 auto 16px",
                        }}
                    ></div>
                    <div style={{ color: "#6B7280" }}>Loading data...</div>
                    <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
                </div>
            </div>
        )
    }

    if (view === "newQuotation") {
        return (
            <QuotationForm
                quotation={selectedItem}
                isNew={true}
                onSave={saveQuotation}
                onCancel={() => {
                    setSelectedItem(null)
                    setView("admin")
                }}
                saving={saving}
            />
        )
    }

    if (view === "editQuotation" && selectedItem) {
        return (
            <QuotationForm
                quotation={selectedItem}
                isNew={false}
                onSave={saveQuotation}
                onCancel={() => setView("quotation")}
                saving={saving}
            />
        )
    }

    if (view === "newInvoice") {
        return (
            <InvoiceForm
                invoice={selectedItem}
                isNew={true}
                fromQuotation={convertingQuotation}
                onSave={saveInvoice}
                onCancel={() => {
                    setSelectedItem(null)
                    setConvertingQuotation(null)
                    setView("admin")
                }}
                saving={saving}
            />
        )
    }

    if (view === "editInvoice" && selectedItem) {
        return (
            <InvoiceForm
                invoice={selectedItem}
                isNew={false}
                onSave={saveInvoice}
                onCancel={() => setView("invoice")}
                saving={saving}
            />
        )
    }

    if (view === "quotation" && selectedItem) {
        return (
            <QuotationView
                quotation={selectedItem}
                onBack={isPublicView ? null : () => setView("admin")}
                onEdit={
                    isPublicView
                        ? null
                        : (q) => {
                              setSelectedItem(q)
                              setView("editQuotation")
                          }
                }
                onDuplicate={
                    isPublicView
                        ? null
                        : (q) => {
                              const duplicated = {
                                  ...q,
                                  id: null,
                                  status: "draft",
                                  createdAt: null,
                                  updatedAt: null,
                              }
                              setSelectedItem(duplicated)
                              setView("newQuotation")
                          }
                }
                onConvertToInvoice={isPublicView ? null : convertToInvoice}
                onShare={() => copyShareLink(selectedItem)}
                onUpdateStatus={isPublicView ? null : updateQuotationStatus}
                onDelete={isPublicView ? null : deleteQuotation}
                isPublicView={isPublicView}
                companyLogo={companyLogo}
            />
        )
    }

    if (view === "invoice" && selectedItem) {
        return (
            <InvoiceView
                invoice={selectedItem}
                onBack={isPublicView ? null : () => setView("admin")}
                onEdit={
                    isPublicView
                        ? null
                        : (inv) => {
                              setSelectedItem(inv)
                              setView("editInvoice")
                          }
                }
                onDuplicate={
                    isPublicView
                        ? null
                        : (inv) => {
                              const duplicated = {
                                  ...inv,
                                  id: null,
                                  status: "unpaid",
                                  quotationRef: "",
                                  deposit: null,
                                  payments: [],
                                  createdAt: null,
                                  updatedAt: null,
                              }
                              setSelectedItem(duplicated)
                              setView("newInvoice")
                          }
                }
                onMarkPaid={isPublicView ? null : markInvoicePaid}
                onMarkDepositPaid={isPublicView ? null : markDepositPaid}
                onShare={() => copyShareLink(selectedItem)}
                onUpdateStatus={isPublicView ? null : updateInvoiceStatus}
                onDelete={isPublicView ? null : deleteInvoice}
                isPublicView={isPublicView}
                companyLogo={companyLogo}
            />
        )
    }

    return (
        <AdminPanel
            quotations={quotations}
            invoices={invoices}
            onViewQuotation={(q) => {
                setSelectedItem(q)
                setView("quotation")
            }}
            onViewInvoice={(inv) => {
                setSelectedItem(inv)
                setView("invoice")
            }}
            onNewQuotation={() => {
                setSelectedItem(null)
                setView("newQuotation")
            }}
            onNewInvoice={() => {
                setSelectedItem(null)
                setConvertingQuotation(null)
                setView("newInvoice")
            }}
            onRefresh={loadData}
            companyLogo={companyLogo}
        />
    )
}

// ============================================
// RENDER
// ============================================
const rootEl = document.getElementById("root")
ReactDOM.createRoot(rootEl).render(<App companyLogo={COMPANY_LOGO} />)