// ============================================
// views.jsx — Quotation View (v3 pro clean document)
// ============================================
function QuotationView({
    quotation,
    onBack,
    onEdit,
    onDuplicate,
    onConvertToInvoice,
    onShare,
    onUpdateStatus,
    onDelete,
    isPublicView,
    companyLogo,
}) {
    const q = quotation
    const ACCENT = "#EA580C"

    const microLabel = {
        fontSize: 10,
        fontWeight: 700,
        color: "#94A3B8",
        textTransform: "uppercase",
        letterSpacing: 1.2,
    }
    const sectionLabel = { ...microLabel, marginBottom: 14 }
    const padX = "clamp(20px, 5vw, 40px)"

    const handlePrint = () => {
        window.print()
    }

    const handleDownloadPDF = () => {
        const filename = `Quotation_${q.id.replace("#", "")}.pdf`
        generatePDF("pdf-content-quotation", filename, "quotation")
    }

    const depositAmount =
        q.depositType === "custom" && q.depositCustom
            ? q.depositCustom
            : (q.total * (q.depositPercentage || 30)) / 100

    const Divider = () => (
        <div style={{ borderTop: "1px solid #EEF1F5", margin: `0 ${padX}` }} />
    )

    return (
        <div
            style={{
                minHeight: "100vh",
                width: "100%",
                backgroundColor: "#EDF0F4",
                fontFamily: "'Inter', system-ui, sans-serif",
                paddingBottom: 40,
            }}
        >
            {/* Top bar */}
            {onBack && (
                <div
                    className="no-print"
                    style={{
                        maxWidth: 820,
                        margin: "0 auto",
                        padding: "14px 16px",
                    }}
                >
                    <button
                        className="cs-btn"
                        onClick={onBack}
                        style={{
                            padding: "8px 16px",
                            borderRadius: 10,
                            border: "1px solid #E2E8F0",
                            backgroundColor: "#FFF",
                            color: "#334155",
                            fontSize: 13,
                            fontWeight: 600,
                            cursor: "pointer",
                            boxShadow: "0 1px 3px rgba(15,23,42,.06)",
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 6,
                        }}
                    >
                        <Icon name="arrow-left" size={15} />
                        Dashboard
                    </button>
                </div>
            )}

            {/* ===== Document sheet ===== */}
            <div
                className="print-wrap"
                style={{ maxWidth: 820, margin: "0 auto", padding: "0 16px" }}
            >
                <div
                    id="pdf-content-quotation"
                    className="print-sheet"
                    style={{
                        backgroundColor: "#FFF",
                        boxShadow: "0 10px 40px rgba(15,23,42,.10)",
                        borderTop: `4px solid ${ACCENT}`,
                    }}
                >
                    {/* --- Header ringkas: dua blok --- */}
                    <div style={{ display: "flex", flexWrap: "wrap" }}>
                        <div
                            style={{
                                flex: "1 1 240px",
                                background: `linear-gradient(135deg, ${ACCENT} 0%, #F97316 100%)`,
                                padding: "18px 20px",
                                display: "flex",
                                flexDirection: "column",
                                justifyContent: "center",
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 20,
                                    fontWeight: 800,
                                    color: "#FFF",
                                    letterSpacing: 0.5,
                                }}
                            >
                                QUOTATION
                            </div>
                            <div
                                style={{
                                    color: "rgba(255,255,255,.92)",
                                    fontSize: 12.5,
                                    marginTop: 2,
                                }}
                            >
                                {q.company || q.client}
                            </div>
                        </div>

                        <div
                            style={{
                                background:
                                    "linear-gradient(135deg, #1F2937 0%, #2D3748 100%)",
                                padding: "18px 20px",
                                display: "flex",
                                alignItems: "center",
                                gap: 10,
                            }}
                        >
                            <LogoDisplay
                                logo={companyLogo}
                                size={34}
                                bgColor="#FFF"
                                textColor={ACCENT}
                                rounded={8}
                            />
                            <div>
                                <div
                                    style={{
                                        fontSize: 12.5,
                                        fontWeight: 700,
                                        color: "#FFF",
                                        whiteSpace: "nowrap",
                                    }}
                                >
                                    {companyInfo.name}
                                </div>
                                <div
                                    style={{ color: "#9CA3AF", fontSize: 10 }}
                                >
                                    {companyInfo.ssm}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* --- Meta bar: No / Date / Valid + status --- */}
                    <div
                        style={{
                            padding: `12px ${padX}`,
                            borderBottom: "1px solid #EEF1F5",
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            flexWrap: "wrap",
                            gap: 12,
                        }}
                    >
                        <div style={{ display: "flex", gap: 26 }}>
                            <div>
                                <div style={microLabel}>No</div>
                                <div
                                    style={{
                                        fontFamily: "monospace",
                                        fontSize: 13,
                                        fontWeight: 700,
                                        color: "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {q.id}
                                </div>
                            </div>
                            <div>
                                <div style={microLabel}>Date</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {formatDate(q.date)}
                                </div>
                            </div>
                            <div>
                                <div style={microLabel}>Valid</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#0F172A",
                                        marginTop: 3,
                                    }}
                                >
                                    {q.validDays} Days
                                </div>
                            </div>
                        </div>
                        <StatusSelector
                            currentStatus={q.status}
                            type="quotation"
                            onStatusChange={(newStatus) =>
                                onUpdateStatus && onUpdateStatus(q, newStatus)
                            }
                            isPublicView={isPublicView}
                        />
                    </div>

                    {/* --- Client / Project --- */}
                    <div
                        style={{
                            padding: `24px ${padX}`,
                            display: "flex",
                            flexWrap: "wrap",
                            gap: 24,
                        }}
                    >
                        <div style={{ flex: "1 1 240px" }}>
                            <div style={sectionLabel}>Quotation For</div>
                            <div
                                style={{
                                    fontSize: 17,
                                    fontWeight: 800,
                                    color: "#0F172A",
                                }}
                            >
                                {q.client}
                            </div>
                            {q.company && (
                                <div
                                    style={{
                                        fontSize: 13,
                                        fontWeight: 600,
                                        color: "#334155",
                                        marginTop: 2,
                                    }}
                                >
                                    {q.company}
                                </div>
                            )}
                            <div
                                style={{
                                    fontSize: 12,
                                    color: "#64748B",
                                    marginTop: 4,
                                    lineHeight: 1.6,
                                }}
                            >
                                {q.email}
                                {q.email && q.phone ? <br /> : null}
                                {q.phone}
                            </div>
                        </div>
                        <div style={{ flex: "1 1 240px" }}>
                            <div style={sectionLabel}>Project</div>
                            <div
                                style={{
                                    fontSize: 14.5,
                                    fontWeight: 700,
                                    color: "#0F172A",
                                    lineHeight: 1.5,
                                }}
                            >
                                {q.project}
                            </div>
                        </div>
                    </div>

                    {/* --- Job Description --- */}
                    {q.jobDescription && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>Overview</div>
                                <div
                                    style={{
                                        fontSize: 13,
                                        color: "#475569",
                                        lineHeight: 1.75,
                                    }}
                                >
                                    {q.jobDescription}
                                </div>
                            </div>
                        </>
                    )}

                    {/* --- Acceptance Criteria --- */}
                    {q.acceptanceCriteria && q.acceptanceCriteria.length > 0 && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>
                                    Acceptance Criteria
                                </div>
                                <div
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 10,
                                    }}
                                >
                                    {q.acceptanceCriteria.map((item, i) => (
                                        <div
                                            key={i}
                                            style={{
                                                display: "flex",
                                                gap: 12,
                                                alignItems: "flex-start",
                                            }}
                                        >
                                            <span
                                                style={{
                                                    fontSize: 11,
                                                    fontWeight: 800,
                                                    color: ACCENT,
                                                    minWidth: 20,
                                                    marginTop: 2,
                                                }}
                                            >
                                                {String(i + 1).padStart(2, "0")}
                                            </span>
                                            <span
                                                style={{
                                                    fontSize: 13,
                                                    color: "#475569",
                                                    lineHeight: 1.6,
                                                }}
                                            >
                                                {item}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </>
                    )}

                    {/* --- Scope --- */}
                    {q.scope && q.scope.length > 0 && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>Scope of Work</div>
                                {q.scope.map((section, idx) => (
                                    <div
                                        key={idx}
                                        style={{
                                            marginBottom:
                                                idx !== q.scope.length - 1
                                                    ? 22
                                                    : 0,
                                        }}
                                    >
                                        <div
                                            style={{
                                                fontSize: 13.5,
                                                fontWeight: 700,
                                                color: "#0F172A",
                                                marginBottom: 10,
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 8,
                                            }}
                                        >
                                            <span
                                                style={{
                                                    width: 4,
                                                    height: 16,
                                                    borderRadius: 2,
                                                    backgroundColor: ACCENT,
                                                    display: "inline-block",
                                                }}
                                            />
                                            {section.title}
                                        </div>
                                        <div
                                            style={{
                                                display: "flex",
                                                flexDirection: "column",
                                                gap: 6,
                                                paddingLeft: 12,
                                            }}
                                        >
                                            {section.items.map((item, i) => (
                                                <div key={i}>
                                                    <div
                                                        style={{
                                                            display: "flex",
                                                            gap: 8,
                                                            alignItems:
                                                                "flex-start",
                                                        }}
                                                    >
                                                        <span
                                                            style={{
                                                                color: ACCENT,
                                                                fontSize: 11,
                                                                marginTop: 3,
                                                            }}
                                                        >
                                                            •
                                                        </span>
                                                        <span
                                                            style={{
                                                                fontSize: 13,
                                                                color: "#334155",
                                                                lineHeight: 1.6,
                                                            }}
                                                        >
                                                            {item.main}
                                                        </span>
                                                    </div>
                                                    {item.sub &&
                                                        item.sub.length > 0 && (
                                                            <div
                                                                style={{
                                                                    marginLeft: 18,
                                                                    marginTop: 4,
                                                                    display:
                                                                        "flex",
                                                                    flexDirection:
                                                                        "column",
                                                                    gap: 3,
                                                                }}
                                                            >
                                                                {item.sub.map(
                                                                    (
                                                                        sub,
                                                                        j
                                                                    ) => (
                                                                        <div
                                                                            key={
                                                                                j
                                                                            }
                                                                            style={{
                                                                                display:
                                                                                    "flex",
                                                                                gap: 8,
                                                                                alignItems:
                                                                                    "flex-start",
                                                                            }}
                                                                        >
                                                                            <span
                                                                                style={{
                                                                                    color: "#CBD5E1",
                                                                                    fontSize: 9,
                                                                                    marginTop: 4,
                                                                                }}
                                                                            >
                                                                                ○
                                                                            </span>
                                                                            <span
                                                                                style={{
                                                                                    fontSize: 12.5,
                                                                                    color: "#64748B",
                                                                                    lineHeight: 1.55,
                                                                                }}
                                                                            >
                                                                                {
                                                                                    sub
                                                                                }
                                                                            </span>
                                                                        </div>
                                                                    )
                                                                )}
                                                            </div>
                                                        )}
                                                </div>
                                            ))}
                                        </div>
                                        {section.note && (
                                            <div
                                                style={{
                                                    marginTop: 8,
                                                    marginLeft: 12,
                                                    fontSize: 12,
                                                    color: ACCENT,
                                                    fontWeight: 600,
                                                }}
                                            >
                                                → {section.note}
                                            </div>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </>
                    )}

                    {/* --- Timeline --- */}
                    {q.timeline && q.timeline.length > 0 && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>
                                    Estimated Timeline
                                </div>
                                <div>
                                    {q.timeline.map((row, i) => (
                                        <div
                                            key={i}
                                            style={{
                                                display: "flex",
                                                justifyContent: "space-between",
                                                gap: 16,
                                                padding: "10px 0",
                                                borderBottom:
                                                    "1px solid #F4F6F9",
                                            }}
                                        >
                                            <div style={{ minWidth: 0 }}>
                                                <div
                                                    style={{
                                                        fontSize: 13,
                                                        fontWeight: 700,
                                                        color: "#0F172A",
                                                    }}
                                                >
                                                    {row.phase}
                                                </div>
                                                <div
                                                    style={{
                                                        fontSize: 12,
                                                        color: "#64748B",
                                                        marginTop: 2,
                                                    }}
                                                >
                                                    {row.desc}
                                                </div>
                                            </div>
                                            <div
                                                style={{
                                                    fontSize: 12.5,
                                                    fontWeight: 700,
                                                    color: ACCENT,
                                                    whiteSpace: "nowrap",
                                                }}
                                            >
                                                {row.duration}
                                            </div>
                                        </div>
                                    ))}
                                    {calculateTimelineTotal(q.timeline) && (
                                        <div
                                            style={{
                                                display: "flex",
                                                justifyContent: "space-between",
                                                padding: "12px 0 0",
                                            }}
                                        >
                                            <span
                                                style={{
                                                    fontSize: 12.5,
                                                    fontWeight: 700,
                                                    color: "#0F172A",
                                                }}
                                            >
                                                Total Duration
                                            </span>
                                            <span
                                                style={{
                                                    fontSize: 12.5,
                                                    fontWeight: 800,
                                                    color: "#0F172A",
                                                }}
                                            >
                                                {calculateTimelineTotal(
                                                    q.timeline
                                                )}
                                            </span>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </>
                    )}

                    {/* --- Pricing table --- */}
                    {q.items && q.items.length > 0 && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>Investment</div>

                                {/* table header */}
                                <div
                                    style={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        paddingBottom: 9,
                                        borderBottom: "2px solid #0F172A",
                                    }}
                                >
                                    <span style={microLabel}>Description</span>
                                    <span style={microLabel}>Amount (RM)</span>
                                </div>

                                {q.items.map((item, i) => (
                                    <div
                                        key={i}
                                        style={{
                                            display: "flex",
                                            justifyContent: "space-between",
                                            gap: 16,
                                            padding: "12px 0",
                                            borderBottom: "1px solid #F4F6F9",
                                        }}
                                    >
                                        <div style={{ minWidth: 0 }}>
                                            <div
                                                style={{
                                                    fontSize: 13.5,
                                                    fontWeight: 600,
                                                    color: "#0F172A",
                                                }}
                                            >
                                                {item.desc}
                                            </div>
                                            {item.itemDesc && (
                                                <div
                                                    style={{
                                                        fontSize: 12,
                                                        color: "#64748B",
                                                        marginTop: 2,
                                                        lineHeight: 1.5,
                                                    }}
                                                >
                                                    {item.itemDesc}
                                                </div>
                                            )}
                                        </div>
                                        {item.priceType === "included" ? (
                                            <span
                                                style={{
                                                    fontSize: 12.5,
                                                    fontWeight: 600,
                                                    color: "#059669",
                                                    fontStyle: "italic",
                                                    whiteSpace: "nowrap",
                                                }}
                                            >
                                                Included
                                            </span>
                                        ) : item.priceType === "lumpsum" ? (
                                            <span
                                                style={{
                                                    fontSize: 12.5,
                                                    fontWeight: 600,
                                                    color: "#64748B",
                                                    fontStyle: "italic",
                                                    whiteSpace: "nowrap",
                                                }}
                                            >
                                                Lump Sum
                                            </span>
                                        ) : (
                                            <span
                                                style={{
                                                    fontSize: 14,
                                                    fontWeight: 700,
                                                    color: "#0F172A",
                                                    whiteSpace: "nowrap",
                                                }}
                                            >
                                                {(
                                                    item.price || 0
                                                ).toLocaleString()}
                                            </span>
                                        )}
                                    </div>
                                ))}

                                {/* grand total */}
                                <div
                                    style={{
                                        display: "flex",
                                        justifyContent: "flex-end",
                                        marginTop: 16,
                                    }}
                                >
                                    <div
                                        style={{
                                            minWidth: 260,
                                            backgroundColor: "#0F172A",
                                            borderRadius: 10,
                                            padding: "14px 18px",
                                            display: "flex",
                                            justifyContent: "space-between",
                                            alignItems: "center",
                                            gap: 20,
                                        }}
                                    >
                                        <span
                                            style={{
                                                ...microLabel,
                                                color: "#94A3B8",
                                            }}
                                        >
                                            Grand Total
                                        </span>
                                        <span
                                            style={{
                                                fontSize: 20,
                                                fontWeight: 800,
                                                color: "#FFF",
                                            }}
                                        >
                                            RM {q.total.toLocaleString()}
                                        </span>
                                    </div>
                                </div>
                                <div
                                    style={{
                                        fontSize: 11.5,
                                        color: "#94A3B8",
                                        marginTop: 10,
                                        textAlign: "right",
                                    }}
                                >
                                    Excludes third-party charges (subscriptions,
                                    plugins, external tools).
                                </div>
                            </div>
                        </>
                    )}

                    {/* --- Deposit & bank --- */}
                    <Divider />
                    <div style={{ padding: `24px ${padX}` }}>
                        <div style={sectionLabel}>Confirmation & Payment</div>
                        <div
                            style={{
                                fontSize: 12.5,
                                color: "#64748B",
                                marginBottom: 14,
                                lineHeight: 1.6,
                            }}
                        >
                            {q.depositType === "percentage"
                                ? `${q.depositPercentage || 30}% deposit required to secure the project timeline.`
                                : "Deposit required to secure the project timeline."}
                        </div>
                        <div
                            style={{
                                display: "flex",
                                flexWrap: "wrap",
                                gap: 12,
                            }}
                        >
                            <div
                                style={{
                                    flex: "1 1 220px",
                                    backgroundColor: "#FFF7ED",
                                    border: "1px solid #FED7AA",
                                    borderRadius: 12,
                                    padding: 16,
                                }}
                            >
                                <div style={microLabel}>
                                    Deposit{" "}
                                    {q.depositType === "percentage"
                                        ? `(${q.depositPercentage || 30}%)`
                                        : ""}
                                </div>
                                <div
                                    style={{
                                        fontSize: 22,
                                        fontWeight: 800,
                                        color: ACCENT,
                                        marginTop: 6,
                                    }}
                                >
                                    RM {depositAmount.toLocaleString()}
                                </div>
                            </div>
                            <div
                                style={{
                                    flex: "1 1 220px",
                                    backgroundColor: "#F8FAFC",
                                    border: "1px solid #E2E8F0",
                                    borderRadius: 12,
                                    padding: 16,
                                }}
                            >
                                <div style={microLabel}>Bank Transfer</div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: 8,
                                        marginTop: 8,
                                    }}
                                >
                                    <span
                                        style={{
                                            backgroundColor: "#FBBF24",
                                            color: "#FFF",
                                            padding: "2px 8px",
                                            borderRadius: 5,
                                            fontWeight: 800,
                                            fontSize: 10.5,
                                        }}
                                    >
                                        {bankDetails.bank}
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: "monospace",
                                            fontSize: 15,
                                            fontWeight: 700,
                                            color: "#0F172A",
                                        }}
                                    >
                                        {bankDetails.accountNo}
                                    </span>
                                </div>
                                <div
                                    style={{
                                        fontSize: 11,
                                        color: "#64748B",
                                        marginTop: 4,
                                    }}
                                >
                                    {bankDetails.accountName}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* --- Notes --- */}
                    {q.projectNotes && q.projectNotes.length > 0 && (
                        <>
                            <Divider />
                            <div style={{ padding: `24px ${padX}` }}>
                                <div style={sectionLabel}>
                                    Terms & Notes
                                </div>
                                <div
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 6,
                                    }}
                                >
                                    {q.projectNotes.map((note, i) => (
                                        <div
                                            key={i}
                                            style={{
                                                display: "flex",
                                                gap: 8,
                                                alignItems: "flex-start",
                                            }}
                                        >
                                            <span
                                                style={{
                                                    color: "#CBD5E1",
                                                    fontSize: 11,
                                                    marginTop: 3,
                                                }}
                                            >
                                                •
                                            </span>
                                            <span
                                                style={{
                                                    fontSize: 12,
                                                    color: "#64748B",
                                                    lineHeight: 1.6,
                                                }}
                                            >
                                                {note}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </>
                    )}

                    {/* --- Footer --- */}
                    <div
                        style={{
                            borderTop: "1px solid #EEF1F5",
                            padding: `18px ${padX} 26px`,
                            textAlign: "center",
                        }}
                    >
                        <div
                            style={{
                                fontSize: 13,
                                fontWeight: 700,
                                color: ACCENT,
                            }}
                        >
                            Thank you for your business!
                        </div>
                        <div
                            style={{
                                fontSize: 11,
                                color: "#94A3B8",
                                marginTop: 5,
                            }}
                        >
                            {companyInfo.name} {companyInfo.tagline} ·{" "}
                            {companyInfo.phone} · {companyInfo.email}
                        </div>
                    </div>
                </div>

                {/* ===== Actions ===== */}
                <div
                    className="no-print"
                    style={{
                        display: "flex",
                        flexDirection: "column",
                        gap: 10,
                        marginTop: 18,
                    }}
                >
                    <div
                        style={{
                            display: "flex",
                            gap: 10,
                            flexWrap: "wrap",
                        }}
                    >
                        <button
                            className="cs-btn"
                            onClick={handlePrint}
                            style={{
                                flex: "1 1 200px",
                                padding: 13,
                                borderRadius: 12,
                                border: "none",
                                background:
                                    "linear-gradient(135deg, #F97316, #EA580C)",
                                color: "#FFF",
                                fontWeight: 700,
                                fontSize: 13.5,
                                cursor: "pointer",
                                boxShadow: "0 4px 12px rgba(249,115,22,.3)",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 7,
                            }}
                        >
                            <Icon name="printer" size={16} />
                            Print / Simpan PDF (A4)
                        </button>
                        {onShare && (
                            <button
                                className="cs-btn"
                                onClick={onShare}
                                style={{
                                    flex: "1 1 160px",
                                    padding: 13,
                                    borderRadius: 12,
                                    border: "1px solid #A7F3D0",
                                    backgroundColor: "#ECFDF5",
                                    color: "#047857",
                                    fontWeight: 700,
                                    fontSize: 13.5,
                                    cursor: "pointer",
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    gap: 7,
                                }}
                            >
                                <Icon name="share" size={16} />
                                Share Link
                            </button>
                        )}
                    </div>

                    {!isPublicView && (
                        <div
                            style={{
                                display: "flex",
                                gap: 10,
                                flexWrap: "wrap",
                            }}
                        >
                            {onEdit && (
                                <button
                                    className="cs-btn"
                                    onClick={() => onEdit(q)}
                                    style={{
                                        flex: "1 1 160px",
                                        padding: 13,
                                        borderRadius: 12,
                                        border: "none",
                                        background:
                                            "linear-gradient(135deg, #F97316, #EA580C)",
                                        color: "#FFF",
                                        fontWeight: 700,
                                        fontSize: 13.5,
                                        cursor: "pointer",
                                        boxShadow:
                                            "0 4px 12px rgba(249,115,22,.3)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        gap: 7,
                                    }}
                                >
                                    <Icon name="edit" size={16} />
                                    Edit
                                </button>
                            )}
                            {onDuplicate && (
                                <button
                                    className="cs-btn"
                                    onClick={() => onDuplicate(q)}
                                    style={{
                                        flex: "1 1 160px",
                                        padding: 13,
                                        borderRadius: 12,
                                        border: "1px solid #E2E8F0",
                                        backgroundColor: "#FFF",
                                        color: "#334155",
                                        fontWeight: 700,
                                        fontSize: 13.5,
                                        cursor: "pointer",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        gap: 7,
                                    }}
                                >
                                    <Icon name="copy" size={16} />
                                    Duplicate
                                </button>
                            )}
                            {onConvertToInvoice && (
                                <button
                                    className="cs-btn"
                                    onClick={() => onConvertToInvoice(q)}
                                    style={{
                                        flex: "1 1 160px",
                                        padding: 13,
                                        borderRadius: 12,
                                        border: "none",
                                        background:
                                            "linear-gradient(135deg, #3B82F6, #2563EB)",
                                        color: "#FFF",
                                        fontWeight: 700,
                                        fontSize: 13.5,
                                        cursor: "pointer",
                                        boxShadow:
                                            "0 4px 12px rgba(37,99,235,.3)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        gap: 7,
                                    }}
                                >
                                    <Icon name="file" size={16} />
                                    Convert to Invoice
                                </button>
                            )}
                        </div>
                    )}

                    {!isPublicView && onDelete && (
                        <button
                            className="cs-btn"
                            onClick={() => onDelete(q)}
                            style={{
                                width: "100%",
                                padding: 12,
                                borderRadius: 12,
                                border: "1px solid #FECACA",
                                backgroundColor: "#FEF2F2",
                                color: "#DC2626",
                                fontWeight: 700,
                                fontSize: 13,
                                cursor: "pointer",
                                marginTop: 4,
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 7,
                            }}
                        >
                            <Icon name="trash" size={15} />
                            Padam Quotation
                        </button>
                    )}
                </div>
            </div>
        </div>
    )
}

window.QuotationView = QuotationView