// ============================================
// forms.jsx — Quotation Form (create/edit)
// ============================================
function QuotationForm({ quotation, onSave, onCancel, isNew }) {
    const exampleQuotation = {
        id: `#Q${String(Math.floor(Math.random() * 9999)).padStart(4, "0")}`,
        client: "",
        company: "",
        email: "",
        phone: "",
        project: "",
        jobDescription: "",
        status: "draft",
        date: new Date().toLocaleDateString("en-GB", {
            day: "2-digit",
            month: "short",
            year: "numeric",
        }),
        validDays: 5,
        depositType: "percentage",
        depositPercentage: 30,
        depositCustom: 0,
        acceptanceCriteria: [""],
        scope: [
            {
                title: "",
                items: [{ main: "", sub: [] }],
                note: "",
            },
        ],
        timeline: [{ phase: "", duration: "", desc: "" }],
        projectNotes: [""],
        items: [{ desc: "", itemDesc: "", priceType: "amount", price: 0 }],
        total: 0,
    }

    const [form, setForm] = useState(quotation || exampleQuotation)

    const updateField = (field, value) => {
        setForm({ ...form, [field]: value })
    }

    const updateItem = (index, field, value) => {
        const newItems = [...form.items]
        if (field === "price") {
            newItems[index][field] = parseFloat(value) || 0
        } else if (field === "priceType") {
            newItems[index][field] = value
            if (value === "included" || value === "lumpsum") {
                newItems[index].price = 0
            }
        } else {
            newItems[index][field] = value
        }
        const total = newItems.reduce((sum, item) => {
            if (!item.priceType || item.priceType === "amount") {
                return sum + (item.price || 0)
            }
            return sum
        }, 0)
        setForm({ ...form, items: newItems, total })
    }

    const addItem = () => {
        setForm({
            ...form,
            items: [
                ...form.items,
                { desc: "", itemDesc: "", priceType: "amount", price: 0 },
            ],
        })
    }

    const removeItem = (index) => {
        if (form.items.length > 1) {
            const newItems = form.items.filter((_, i) => i !== index)
            const total = newItems.reduce((sum, item) => {
                if (!item.priceType || item.priceType === "amount") {
                    return sum + (item.price || 0)
                }
                return sum
            }, 0)
            setForm({ ...form, items: newItems, total })
        }
    }

    const [dragIndex, setDragIndex] = useState(null)

    const handleDragStart = (index) => {
        setDragIndex(index)
    }

    const handleDragOver = (e, index) => {
        e.preventDefault()
    }

    const handleDrop = (e, dropIndex) => {
        e.preventDefault()
        if (dragIndex === null || dragIndex === dropIndex) return

        const newItems = [...form.items]
        const draggedItem = newItems[dragIndex]
        newItems.splice(dragIndex, 1)
        newItems.splice(dropIndex, 0, draggedItem)
        setForm({ ...form, items: newItems })
        setDragIndex(null)
    }

    const moveItem = (index, direction) => {
        const newIndex = index + direction
        if (newIndex < 0 || newIndex >= form.items.length) return

        const newItems = [...form.items]
        const temp = newItems[index]
        newItems[index] = newItems[newIndex]
        newItems[newIndex] = temp
        setForm({ ...form, items: newItems })
    }

    const updateCriteria = (index, value) => {
        const newCriteria = [...(form.acceptanceCriteria || [])]
        newCriteria[index] = value
        setForm({ ...form, acceptanceCriteria: newCriteria })
    }

    const addCriteria = () => {
        setForm({
            ...form,
            acceptanceCriteria: [...(form.acceptanceCriteria || []), ""],
        })
    }

    const removeCriteria = (index) => {
        if ((form.acceptanceCriteria || []).length > 1) {
            setForm({
                ...form,
                acceptanceCriteria: form.acceptanceCriteria.filter(
                    (_, i) => i !== index
                ),
            })
        }
    }

    const updateTimeline = (index, field, value) => {
        const newTimeline = [...(form.timeline || [])]
        newTimeline[index][field] = value
        setForm({ ...form, timeline: newTimeline })
    }

    const addTimeline = () => {
        setForm({
            ...form,
            timeline: [
                ...(form.timeline || []),
                { phase: "", duration: "", desc: "" },
            ],
        })
    }

    const removeTimeline = (index) => {
        if ((form.timeline || []).length > 1) {
            setForm({
                ...form,
                timeline: form.timeline.filter((_, i) => i !== index),
            })
        }
    }

    const updateNote = (index, value) => {
        const newNotes = [...(form.projectNotes || [])]
        newNotes[index] = value
        setForm({ ...form, projectNotes: newNotes })
    }

    const addNote = () => {
        setForm({ ...form, projectNotes: [...(form.projectNotes || []), ""] })
    }

    const removeNote = (index) => {
        if ((form.projectNotes || []).length > 1) {
            setForm({
                ...form,
                projectNotes: form.projectNotes.filter((_, i) => i !== index),
            })
        }
    }

    const updateScopeTitle = (index, value) => {
        const newScope = [...(form.scope || [])]
        newScope[index].title = value
        setForm({ ...form, scope: newScope })
    }

    const updateScopeNote = (index, value) => {
        const newScope = [...(form.scope || [])]
        newScope[index].note = value
        setForm({ ...form, scope: newScope })
    }

    const updateScopeItem = (scopeIndex, itemIndex, value) => {
        const newScope = [...(form.scope || [])]
        newScope[scopeIndex].items[itemIndex].main = value
        setForm({ ...form, scope: newScope })
    }

    const addScopeItem = (scopeIndex) => {
        const newScope = [...(form.scope || [])]
        newScope[scopeIndex].items.push({ main: "", sub: [] })
        setForm({ ...form, scope: newScope })
    }

    const removeScopeItem = (scopeIndex, itemIndex) => {
        const newScope = [...(form.scope || [])]
        if (newScope[scopeIndex].items.length > 1) {
            newScope[scopeIndex].items = newScope[scopeIndex].items.filter(
                (_, i) => i !== itemIndex
            )
            setForm({ ...form, scope: newScope })
        }
    }

    const addScope = () => {
        setForm({
            ...form,
            scope: [
                ...(form.scope || []),
                { title: "", items: [{ main: "", sub: [] }], note: "" },
            ],
        })
    }

    const removeScope = (index) => {
        if ((form.scope || []).length > 1) {
            setForm({
                ...form,
                scope: form.scope.filter((_, i) => i !== index),
            })
        }
    }

    return (
        <div
            style={{
                minHeight: "100vh",
                width: "100%",
                backgroundColor: "#F3F4F6",
                fontFamily: "system-ui, sans-serif",
            }}
        >
            {/* Header */}
            <div
                style={{
                    background:
                        "linear-gradient(135deg, #1F2937 0%, #374151 100%)",
                }}
            >
                <div
                    style={{ maxWidth: 800, margin: "0 auto", padding: "16px" }}
                >
                    <button
                        onClick={onCancel}
                        style={{
                            marginBottom: 12,
                            padding: "6px 12px",
                            borderRadius: 8,
                            border: "none",
                            backgroundColor: "rgba(255,255,255,0.15)",
                            color: "#FFF",
                            fontSize: 13,
                            cursor: "pointer",
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 6,
                        }}
                    >
                        <Icon name="arrow-left" size={14} />
                        Cancel
                    </button>
                    <div
                        style={{ fontSize: 20, fontWeight: 700, color: "#FFF" }}
                    >
                        {isNew ? "New Quotation" : "Edit Quotation"}
                    </div>
                    <div
                        style={{ color: "#9CA3AF", fontSize: 13, marginTop: 4 }}
                    >
                        {form.id}
                    </div>
                </div>
            </div>

            {/* Form */}
            <div
                style={{
                    maxWidth: 800,
                    margin: "0 auto",
                    minHeight: "calc(100vh - 120px)",
                }}
            >
                <div style={{ padding: 16 }}>
                    {/* Client Info */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                fontSize: 15,
                                fontWeight: 600,
                                color: "#F97316",
                                marginBottom: 16,
                            }}
                        >
                            <Icon
                                name="user"
                                size={16}
                                style={{ marginRight: 7 }}
                            />
                            Client Information
                        </div>

                        <div style={{ marginBottom: 16 }}>
                            <label style={labelStyle}>Client Name *</label>
                            <input
                                style={inputStyle}
                                value={form.client}
                                onChange={(e) =>
                                    updateField("client", e.target.value)
                                }
                                placeholder="cth: Javen Khoo"
                            />
                        </div>

                        <div style={{ marginBottom: 16 }}>
                            <label style={labelStyle}>Company</label>
                            <input
                                style={inputStyle}
                                value={form.company}
                                onChange={(e) =>
                                    updateField("company", e.target.value)
                                }
                                placeholder="cth: SimpliSolar Sdn Bhd"
                            />
                        </div>

                        <div
                            style={{
                                display: "grid",
                                gridTemplateColumns: "1fr 1fr",
                                gap: 12,
                            }}
                        >
                            <div>
                                <label style={labelStyle}>Email</label>
                                <input
                                    style={inputStyle}
                                    type="email"
                                    value={form.email}
                                    onChange={(e) =>
                                        updateField("email", e.target.value)
                                    }
                                    placeholder="cth: javen@simplisolar.com"
                                />
                            </div>
                            <div>
                                <label style={labelStyle}>Phone</label>
                                <input
                                    style={inputStyle}
                                    value={form.phone}
                                    onChange={(e) =>
                                        updateField("phone", e.target.value)
                                    }
                                    placeholder="cth: 012-6505552"
                                />
                            </div>
                        </div>
                    </div>

                    {/* Project Info */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                fontSize: 15,
                                fontWeight: 600,
                                color: "#F97316",
                                marginBottom: 16,
                            }}
                        >
                            <Icon
                                name="clipboard"
                                size={16}
                                style={{ marginRight: 7 }}
                            />
                            Project Details
                        </div>

                        <div style={{ marginBottom: 16 }}>
                            <label style={labelStyle}>Project Title *</label>
                            <input
                                style={inputStyle}
                                value={form.project}
                                onChange={(e) =>
                                    updateField("project", e.target.value)
                                }
                                placeholder="cth: Web Design Package - Redesign Corporate Website"
                            />
                        </div>

                        <div style={{ marginBottom: 16 }}>
                            <label style={labelStyle}>Job Description</label>
                            <textarea
                                style={{
                                    ...inputStyle,
                                    minHeight: 100,
                                    resize: "vertical",
                                }}
                                value={form.jobDescription}
                                onChange={(e) =>
                                    updateField(
                                        "jobDescription",
                                        e.target.value
                                    )
                                }
                                placeholder="cth: This project involves the complete revamp of the corporate website to enhance user experience, strengthen brand credibility, and improve lead conversion..."
                            />
                        </div>

                        <div
                            style={{
                                display: "grid",
                                gridTemplateColumns: "1fr 1fr 1fr",
                                gap: 12,
                            }}
                        >
                            <div>
                                <label style={labelStyle}>Status</label>
                                <select
                                    style={inputStyle}
                                    value={form.status}
                                    onChange={(e) =>
                                        updateField("status", e.target.value)
                                    }
                                >
                                    <option value="draft">Draft</option>
                                    <option value="sent">Sent/Pending</option>
                                    <option value="accepted">Accepted</option>
                                    <option value="rejected">Rejected</option>
                                </select>
                            </div>
                            <div>
                                <label style={labelStyle}>Date</label>
                                <input
                                    style={inputStyle}
                                    type="date"
                                    value={toDateInputValue(form.date)}
                                    onChange={(e) =>
                                        updateField("date", e.target.value)
                                    }
                                />
                            </div>
                            <div>
                                <label style={labelStyle}>Valid Days</label>
                                <input
                                    style={inputStyle}
                                    type="number"
                                    value={form.validDays}
                                    onChange={(e) =>
                                        updateField(
                                            "validDays",
                                            parseInt(e.target.value) || 5
                                        )
                                    }
                                    placeholder="cth: 5"
                                />
                            </div>
                        </div>
                    </div>

                    {/* Acceptance Criteria */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 16,
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 15,
                                    fontWeight: 600,
                                    color: "#F97316",
                                }}
                            >
                                <Icon
                                    name="list-checks"
                                    size={16}
                                    style={{ marginRight: 7 }}
                                />
                                Acceptance Criteria
                            </div>
                            <button
                                onClick={addCriteria}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "none",
                                    backgroundColor: "#FFF7ED",
                                    color: "#EA580C",
                                    fontWeight: 600,
                                    fontSize: 12,
                                    cursor: "pointer",
                                }}
                            >
                                + Add
                            </button>
                        </div>
                        <div
                            style={{
                                fontSize: 12,
                                color: "#9CA3AF",
                                marginBottom: 12,
                            }}
                        >
                            Senarai kriteria yang perlu dipenuhi untuk project
                            dianggap complete
                        </div>

                        {(form.acceptanceCriteria || [""]).map(
                            (criteria, index) => (
                                <div
                                    key={index}
                                    style={{
                                        display: "flex",
                                        gap: 8,
                                        marginBottom: 10,
                                        alignItems: "flex-start",
                                    }}
                                >
                                    <div
                                        style={{
                                            width: 24,
                                            height: 36,
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            color: "#F97316",
                                            fontWeight: 600,
                                            fontSize: 13,
                                        }}
                                    >
                                        {index + 1}.
                                    </div>
                                    <input
                                        style={{ ...inputStyle, flex: 1 }}
                                        value={criteria}
                                        onChange={(e) =>
                                            updateCriteria(
                                                index,
                                                e.target.value
                                            )
                                        }
                                        placeholder={
                                            index === 0
                                                ? "cth: Website fully responsive dan loads within 3 seconds"
                                                : "cth: Design follows brand identity guidelines"
                                        }
                                    />
                                    {(form.acceptanceCriteria || []).length >
                                        1 && (
                                        <button
                                            onClick={() =>
                                                removeCriteria(index)
                                            }
                                            style={{
                                                padding: "10px",
                                                borderRadius: 8,
                                                border: "none",
                                                backgroundColor: "#FEE2E2",
                                                color: "#DC2626",
                                                cursor: "pointer",
                                                fontSize: 14,
                                            }}
                                        >
                                            <Icon name="x" size={14} />
                                        </button>
                                    )}
                                </div>
                            )
                        )}
                    </div>

                    {/* Scope / Description */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 16,
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 15,
                                    fontWeight: 600,
                                    color: "#F97316",
                                }}
                            >
                                <Icon
                                    name="file"
                                    size={16}
                                    style={{ marginRight: 7 }}
                                />
                                Scope / Description
                            </div>
                            <button
                                onClick={addScope}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "none",
                                    backgroundColor: "#FFF7ED",
                                    color: "#EA580C",
                                    fontWeight: 600,
                                    fontSize: 12,
                                    cursor: "pointer",
                                }}
                            >
                                + Add Section
                            </button>
                        </div>
                        <div
                            style={{
                                fontSize: 12,
                                color: "#9CA3AF",
                                marginBottom: 12,
                            }}
                        >
                            Pecahkan scope kepada beberapa section (cth: Design,
                            Development, SEO)
                        </div>

                        {(form.scope || []).map((section, scopeIndex) => (
                            <div
                                key={scopeIndex}
                                style={{
                                    backgroundColor: "#F9FAFB",
                                    borderRadius: 10,
                                    padding: 14,
                                    marginBottom: 12,
                                    border: "1px solid #E5E7EB",
                                }}
                            >
                                <div
                                    style={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        marginBottom: 12,
                                    }}
                                >
                                    <div
                                        style={{
                                            fontWeight: 600,
                                            color: "#374151",
                                            fontSize: 13,
                                        }}
                                    >
                                        Section {scopeIndex + 1}
                                    </div>
                                    {(form.scope || []).length > 1 && (
                                        <button
                                            onClick={() =>
                                                removeScope(scopeIndex)
                                            }
                                            style={{
                                                padding: "4px 8px",
                                                borderRadius: 6,
                                                border: "none",
                                                backgroundColor: "#FEE2E2",
                                                color: "#DC2626",
                                                cursor: "pointer",
                                                fontSize: 12,
                                            }}
                                        >
                                            Remove
                                        </button>
                                    )}
                                </div>

                                <div style={{ marginBottom: 12 }}>
                                    <label
                                        style={{ ...labelStyle, fontSize: 11 }}
                                    >
                                        Section Title
                                    </label>
                                    <input
                                        style={inputStyle}
                                        value={section.title}
                                        onChange={(e) =>
                                            updateScopeTitle(
                                                scopeIndex,
                                                e.target.value
                                            )
                                        }
                                        placeholder={
                                            scopeIndex === 0
                                                ? "cth: Design & Prototype"
                                                : scopeIndex === 1
                                                  ? "cth: Development"
                                                  : "cth: SEO Optimization"
                                        }
                                    />
                                </div>

                                <div style={{ marginBottom: 12 }}>
                                    <div
                                        style={{
                                            display: "flex",
                                            justifyContent: "space-between",
                                            alignItems: "center",
                                            marginBottom: 8,
                                        }}
                                    >
                                        <label
                                            style={{
                                                ...labelStyle,
                                                fontSize: 11,
                                                marginBottom: 0,
                                            }}
                                        >
                                            Items
                                        </label>
                                        <button
                                            onClick={() =>
                                                addScopeItem(scopeIndex)
                                            }
                                            style={{
                                                padding: "4px 8px",
                                                borderRadius: 4,
                                                border: "none",
                                                backgroundColor: "#E5E7EB",
                                                color: "#374151",
                                                fontSize: 11,
                                                cursor: "pointer",
                                            }}
                                        >
                                            + Item
                                        </button>
                                    </div>
                                    {section.items.map((item, itemIndex) => (
                                        <div
                                            key={itemIndex}
                                            style={{
                                                display: "flex",
                                                gap: 8,
                                                marginBottom: 8,
                                            }}
                                        >
                                            <span
                                                style={{
                                                    color: "#F97316",
                                                    padding: "10px 0",
                                                }}
                                            >
                                                •
                                            </span>
                                            <input
                                                style={{
                                                    ...inputStyle,
                                                    flex: 1,
                                                }}
                                                value={item.main}
                                                onChange={(e) =>
                                                    updateScopeItem(
                                                        scopeIndex,
                                                        itemIndex,
                                                        e.target.value
                                                    )
                                                }
                                                placeholder={
                                                    itemIndex === 0
                                                        ? "cth: Responsive Design: Desktop & Mobile"
                                                        : "cth: UI/UX Design dengan mockups"
                                                }
                                            />
                                            {section.items.length > 1 && (
                                                <button
                                                    onClick={() =>
                                                        removeScopeItem(
                                                            scopeIndex,
                                                            itemIndex
                                                        )
                                                    }
                                                    style={{
                                                        padding: "8px",
                                                        borderRadius: 6,
                                                        border: "none",
                                                        backgroundColor:
                                                            "#FEE2E2",
                                                        color: "#DC2626",
                                                        cursor: "pointer",
                                                        fontSize: 12,
                                                    }}
                                                >
                                                    <Icon name="x" size={14} />
                                                </button>
                                            )}
                                        </div>
                                    ))}
                                </div>

                                <div>
                                    <label
                                        style={{ ...labelStyle, fontSize: 11 }}
                                    >
                                        Note (optional)
                                    </label>
                                    <input
                                        style={inputStyle}
                                        value={section.note || ""}
                                        onChange={(e) =>
                                            updateScopeNote(
                                                scopeIndex,
                                                e.target.value
                                            )
                                        }
                                        placeholder="cth: Please refer to pages 4 & 5 for more details"
                                    />
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Timeline */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 16,
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 15,
                                    fontWeight: 600,
                                    color: "#F97316",
                                }}
                            >
                                <Icon
                                    name="calendar"
                                    size={16}
                                    style={{ marginRight: 7 }}
                                />
                                Timeline
                            </div>
                            <button
                                onClick={addTimeline}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "none",
                                    backgroundColor: "#FFF7ED",
                                    color: "#EA580C",
                                    fontWeight: 600,
                                    fontSize: 12,
                                    cursor: "pointer",
                                }}
                            >
                                + Add Phase
                            </button>
                        </div>
                        <div
                            style={{
                                fontSize: 12,
                                color: "#9CA3AF",
                                marginBottom: 12,
                            }}
                        >
                            Pecahkan timeline kepada phases dengan duration
                            (cth: "1-2 days" atau "5 days")
                        </div>

                        {(form.timeline || []).map((row, index) => (
                            <div
                                key={index}
                                style={{
                                    backgroundColor: "#F9FAFB",
                                    borderRadius: 10,
                                    padding: 14,
                                    marginBottom: 10,
                                    border: "1px solid #E5E7EB",
                                }}
                            >
                                <div
                                    style={{
                                        display: "flex",
                                        gap: 8,
                                        marginBottom: 8,
                                    }}
                                >
                                    <div style={{ flex: 1 }}>
                                        <label
                                            style={{
                                                ...labelStyle,
                                                fontSize: 11,
                                            }}
                                        >
                                            Phase
                                        </label>
                                        <input
                                            style={inputStyle}
                                            value={row.phase}
                                            onChange={(e) =>
                                                updateTimeline(
                                                    index,
                                                    "phase",
                                                    e.target.value
                                                )
                                            }
                                            placeholder={
                                                index === 0
                                                    ? "cth: Kickoff & Discovery"
                                                    : index === 1
                                                      ? "cth: Design Phase"
                                                      : "cth: Development"
                                            }
                                        />
                                    </div>
                                    <div style={{ width: 100 }}>
                                        <label
                                            style={{
                                                ...labelStyle,
                                                fontSize: 11,
                                            }}
                                        >
                                            Duration
                                        </label>
                                        <input
                                            style={inputStyle}
                                            value={row.duration}
                                            onChange={(e) =>
                                                updateTimeline(
                                                    index,
                                                    "duration",
                                                    e.target.value
                                                )
                                            }
                                            placeholder="1-2 days"
                                        />
                                    </div>
                                    {(form.timeline || []).length > 1 && (
                                        <button
                                            onClick={() =>
                                                removeTimeline(index)
                                            }
                                            style={{
                                                padding: "8px",
                                                borderRadius: 6,
                                                border: "none",
                                                backgroundColor: "#FEE2E2",
                                                color: "#DC2626",
                                                cursor: "pointer",
                                                fontSize: 12,
                                                marginTop: 22,
                                            }}
                                        >
                                            <Icon name="x" size={14} />
                                        </button>
                                    )}
                                </div>
                                <div>
                                    <label
                                        style={{ ...labelStyle, fontSize: 11 }}
                                    >
                                        Description
                                    </label>
                                    <input
                                        style={inputStyle}
                                        value={row.desc}
                                        onChange={(e) =>
                                            updateTimeline(
                                                index,
                                                "desc",
                                                e.target.value
                                            )
                                        }
                                        placeholder="cth: Project alignment, Assets requests, Audit report"
                                    />
                                </div>
                            </div>
                        ))}

                        {calculateTimelineTotal(form.timeline) && (
                            <div
                                style={{
                                    padding: 12,
                                    backgroundColor: "#FFF7ED",
                                    borderRadius: 8,
                                    border: "1px solid #FDBA74",
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                }}
                            >
                                <span
                                    style={{ color: "#9A3412", fontSize: 13 }}
                                >
                                    Estimated Total:
                                </span>
                                <span
                                    style={{
                                        fontWeight: 700,
                                        color: "#EA580C",
                                        fontSize: 15,
                                    }}
                                >
                                    {calculateTimelineTotal(form.timeline)}
                                </span>
                            </div>
                        )}
                    </div>

                    {/* Pricing Items */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 16,
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 15,
                                    fontWeight: 600,
                                    color: "#F97316",
                                }}
                            >
                                <Icon
                                    name="dollar"
                                    size={16}
                                    style={{ marginRight: 7 }}
                                />
                                Pricing
                            </div>
                            <button
                                onClick={addItem}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "none",
                                    backgroundColor: "#FFF7ED",
                                    color: "#EA580C",
                                    fontWeight: 600,
                                    fontSize: 12,
                                    cursor: "pointer",
                                }}
                            >
                                + Add Item
                            </button>
                        </div>

                        {form.items.map((item, index) => (
                            <div
                                key={index}
                                draggable
                                onDragStart={() => handleDragStart(index)}
                                onDragOver={(e) => handleDragOver(e, index)}
                                onDrop={(e) => handleDrop(e, index)}
                                onDragEnd={() => setDragIndex(null)}
                                style={{
                                    backgroundColor:
                                        dragIndex === index
                                            ? "#FFF7ED"
                                            : "#F9FAFB",
                                    borderRadius: 10,
                                    padding: 14,
                                    marginBottom: 10,
                                    border:
                                        dragIndex === index
                                            ? "2px dashed #F97316"
                                            : "1px solid #E5E7EB",
                                    cursor: "grab",
                                    opacity: dragIndex === index ? 0.8 : 1,
                                }}
                            >
                                <div
                                    style={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        marginBottom: 10,
                                    }}
                                >
                                    <div
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            gap: 4,
                                        }}
                                    >
                                        <span
                                            style={{
                                                color: "#9CA3AF",
                                                cursor: "grab",
                                                display: "flex",
                                            }}
                                        >
                                            <Icon name="grip" size={15} />
                                        </span>
                                        <span
                                            style={{
                                                color: "#9CA3AF",
                                                fontSize: 11,
                                            }}
                                        >
                                            Item {index + 1}
                                        </span>
                                    </div>
                                    <div style={{ display: "flex", gap: 4 }}>
                                        <button
                                            onClick={() => moveItem(index, -1)}
                                            disabled={index === 0}
                                            style={{
                                                padding: "4px 8px",
                                                borderRadius: 4,
                                                border: "1px solid #E5E7EB",
                                                backgroundColor: "#FFF",
                                                color:
                                                    index === 0
                                                        ? "#D1D5DB"
                                                        : "#6B7280",
                                                fontSize: 12,
                                                cursor:
                                                    index === 0
                                                        ? "not-allowed"
                                                        : "pointer",
                                            }}
                                        >
                                            <Icon name="chevron-up" size={14} />
                                        </button>
                                        <button
                                            onClick={() => moveItem(index, 1)}
                                            disabled={
                                                index === form.items.length - 1
                                            }
                                            style={{
                                                padding: "4px 8px",
                                                borderRadius: 4,
                                                border: "1px solid #E5E7EB",
                                                backgroundColor: "#FFF",
                                                color:
                                                    index ===
                                                    form.items.length - 1
                                                        ? "#D1D5DB"
                                                        : "#6B7280",
                                                fontSize: 12,
                                                cursor:
                                                    index ===
                                                    form.items.length - 1
                                                        ? "not-allowed"
                                                        : "pointer",
                                            }}
                                        >
                                            <Icon name="chevron-down" size={14} />
                                        </button>
                                        {form.items.length > 1 && (
                                            <button
                                                onClick={() =>
                                                    removeItem(index)
                                                }
                                                style={{
                                                    padding: "4px 8px",
                                                    borderRadius: 4,
                                                    border: "none",
                                                    backgroundColor: "#FEE2E2",
                                                    color: "#DC2626",
                                                    cursor: "pointer",
                                                    fontSize: 12,
                                                }}
                                            >
                                                <Icon name="x" size={14} />
                                            </button>
                                        )}
                                    </div>
                                </div>

                                <div
                                    style={{
                                        display: "flex",
                                        gap: 8,
                                        marginBottom: 8,
                                    }}
                                >
                                    <div style={{ flex: 1 }}>
                                        <label
                                            style={{
                                                ...labelStyle,
                                                fontSize: 11,
                                            }}
                                        >
                                            Item
                                        </label>
                                        <input
                                            style={inputStyle}
                                            value={item.desc}
                                            onChange={(e) =>
                                                updateItem(
                                                    index,
                                                    "desc",
                                                    e.target.value
                                                )
                                            }
                                            placeholder={
                                                index === 0
                                                    ? "cth: UI/UX Design"
                                                    : index === 1
                                                      ? "cth: Development (WordPress)"
                                                      : "cth: Basic SEO Optimization"
                                            }
                                        />
                                    </div>
                                    <div style={{ width: 120 }}>
                                        <label
                                            style={{
                                                ...labelStyle,
                                                fontSize: 11,
                                            }}
                                        >
                                            Price (RM)
                                        </label>
                                        <input
                                            style={{
                                                ...inputStyle,
                                                backgroundColor:
                                                    item.priceType ===
                                                        "included" ||
                                                    item.priceType === "lumpsum"
                                                        ? "#E5E7EB"
                                                        : "#FFF",
                                                color:
                                                    item.priceType ===
                                                        "included" ||
                                                    item.priceType === "lumpsum"
                                                        ? "#9CA3AF"
                                                        : "#111827",
                                            }}
                                            type="number"
                                            value={
                                                item.priceType === "included" ||
                                                item.priceType === "lumpsum"
                                                    ? ""
                                                    : item.price || ""
                                            }
                                            onChange={(e) =>
                                                updateItem(
                                                    index,
                                                    "price",
                                                    e.target.value
                                                )
                                            }
                                            placeholder={
                                                item.priceType === "included" ||
                                                item.priceType === "lumpsum"
                                                    ? "-"
                                                    : "2000"
                                            }
                                            disabled={
                                                item.priceType === "included" ||
                                                item.priceType === "lumpsum"
                                            }
                                        />
                                    </div>
                                </div>

                                <div
                                    style={{
                                        display: "flex",
                                        gap: 6,
                                        marginBottom: 8,
                                    }}
                                >
                                    {[
                                        { value: "amount", label: "Amount" },
                                        { value: "included", label: "Included" },
                                        { value: "lumpsum", label: "Lump Sum" },
                                    ].map((opt) => (
                                        <button
                                            key={opt.value}
                                            type="button"
                                            onClick={() =>
                                                updateItem(
                                                    index,
                                                    "priceType",
                                                    opt.value
                                                )
                                            }
                                            style={{
                                                padding: "6px 12px",
                                                borderRadius: 20,
                                                border: "1px solid",
                                                borderColor:
                                                    (item.priceType ||
                                                        "amount") === opt.value
                                                        ? "#F97316"
                                                        : "#E5E7EB",
                                                backgroundColor:
                                                    (item.priceType ||
                                                        "amount") === opt.value
                                                        ? "#FFF7ED"
                                                        : "#FFF",
                                                color:
                                                    (item.priceType ||
                                                        "amount") === opt.value
                                                        ? "#EA580C"
                                                        : "#6B7280",
                                                fontSize: 11,
                                                fontWeight:
                                                    (item.priceType ||
                                                        "amount") === opt.value
                                                        ? 600
                                                        : 400,
                                                cursor: "pointer",
                                                display: "inline-flex",
                                                alignItems: "center",
                                                gap: 5,
                                            }}
                                        >
                                            <Icon
                                                name={
                                                    (item.priceType ||
                                                        "amount") === opt.value
                                                        ? "dot-circle"
                                                        : "circle"
                                                }
                                                size={13}
                                            />
                                            {opt.label}
                                        </button>
                                    ))}
                                </div>

                                <div>
                                    <label
                                        style={{ ...labelStyle, fontSize: 11 }}
                                    >
                                        Description{" "}
                                        <span
                                            style={{
                                                color: "#9CA3AF",
                                                fontWeight: 400,
                                            }}
                                        >
                                            (optional)
                                        </span>
                                    </label>
                                    <input
                                        style={inputStyle}
                                        value={item.itemDesc || ""}
                                        onChange={(e) =>
                                            updateItem(
                                                index,
                                                "itemDesc",
                                                e.target.value
                                            )
                                        }
                                        placeholder="cth: Includes wireframe, mockup, and prototype"
                                    />
                                </div>
                            </div>
                        ))}

                        <div
                            style={{
                                borderTop: "2px solid #111827",
                                marginTop: 16,
                                paddingTop: 16,
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                            }}
                        >
                            <span style={{ fontWeight: 600, color: "#111827" }}>
                                Total
                            </span>
                            <span
                                style={{
                                    fontSize: 24,
                                    fontWeight: 700,
                                    color: "#111827",
                                }}
                            >
                                RM {form.total.toLocaleString()}
                            </span>
                        </div>
                    </div>

                    {/* Deposit Options */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                fontSize: 15,
                                fontWeight: 600,
                                color: "#F97316",
                                marginBottom: 16,
                            }}
                        >
                            <Icon
                                name="credit-card"
                                size={16}
                                style={{ marginRight: 7 }}
                            />
                            Deposit
                        </div>
                        <div
                            style={{
                                fontSize: 12,
                                color: "#9CA3AF",
                                marginBottom: 12,
                            }}
                        >
                            Pilih jenis deposit - percentage atau custom amount
                        </div>

                        <div
                            style={{
                                display: "flex",
                                gap: 8,
                                marginBottom: 16,
                            }}
                        >
                            <button
                                type="button"
                                onClick={() =>
                                    updateField("depositType", "percentage")
                                }
                                style={{
                                    flex: 1,
                                    padding: "10px",
                                    borderRadius: 8,
                                    border: "1px solid",
                                    borderColor:
                                        form.depositType === "percentage"
                                            ? "#F97316"
                                            : "#E5E7EB",
                                    backgroundColor:
                                        form.depositType === "percentage"
                                            ? "#FFF7ED"
                                            : "#FFF",
                                    color:
                                        form.depositType === "percentage"
                                            ? "#EA580C"
                                            : "#6B7280",
                                    fontWeight: 600,
                                    fontSize: 13,
                                    cursor: "pointer",
                                }}
                            >
                                Percentage %
                            </button>
                            <button
                                type="button"
                                onClick={() =>
                                    updateField("depositType", "custom")
                                }
                                style={{
                                    flex: 1,
                                    padding: "10px",
                                    borderRadius: 8,
                                    border: "1px solid",
                                    borderColor:
                                        form.depositType === "custom"
                                            ? "#F97316"
                                            : "#E5E7EB",
                                    backgroundColor:
                                        form.depositType === "custom"
                                            ? "#FFF7ED"
                                            : "#FFF",
                                    color:
                                        form.depositType === "custom"
                                            ? "#EA580C"
                                            : "#6B7280",
                                    fontWeight: 600,
                                    fontSize: 13,
                                    cursor: "pointer",
                                }}
                            >
                                Custom Amount
                            </button>
                        </div>

                        {form.depositType === "percentage" && (
                            <div>
                                <label style={labelStyle}>
                                    Select Percentage
                                </label>
                                <div style={{ display: "flex", gap: 8 }}>
                                    {[30, 50, 100].map((pct) => (
                                        <button
                                            key={pct}
                                            type="button"
                                            onClick={() =>
                                                updateField(
                                                    "depositPercentage",
                                                    pct
                                                )
                                            }
                                            style={{
                                                flex: 1,
                                                padding: "12px",
                                                borderRadius: 8,
                                                border: "2px solid",
                                                borderColor:
                                                    form.depositPercentage ===
                                                    pct
                                                        ? "#F97316"
                                                        : "#E5E7EB",
                                                backgroundColor:
                                                    form.depositPercentage ===
                                                    pct
                                                        ? "#FFF7ED"
                                                        : "#FFF",
                                                color:
                                                    form.depositPercentage ===
                                                    pct
                                                        ? "#EA580C"
                                                        : "#374151",
                                                fontWeight: 700,
                                                fontSize: 15,
                                                cursor: "pointer",
                                            }}
                                        >
                                            {pct}%
                                        </button>
                                    ))}
                                </div>
                                <div
                                    style={{
                                        marginTop: 12,
                                        padding: 12,
                                        backgroundColor: "#F9FAFB",
                                        borderRadius: 8,
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                    }}
                                >
                                    <span
                                        style={{
                                            color: "#6B7280",
                                            fontSize: 13,
                                        }}
                                    >
                                        Deposit Amount:
                                    </span>
                                    <span
                                        style={{
                                            fontWeight: 700,
                                            color: "#EA580C",
                                            fontSize: 18,
                                        }}
                                    >
                                        RM{" "}
                                        {(
                                            (form.total *
                                                form.depositPercentage) /
                                            100
                                        ).toLocaleString()}
                                    </span>
                                </div>
                            </div>
                        )}

                        {form.depositType === "custom" && (
                            <div>
                                <label style={labelStyle}>
                                    Enter Custom Amount (RM)
                                </label>
                                <input
                                    style={inputStyle}
                                    type="number"
                                    value={form.depositCustom || ""}
                                    onChange={(e) =>
                                        updateField(
                                            "depositCustom",
                                            parseFloat(e.target.value) || 0
                                        )
                                    }
                                    placeholder="cth: 1500"
                                />
                                <div
                                    style={{
                                        marginTop: 12,
                                        padding: 12,
                                        backgroundColor: "#F9FAFB",
                                        borderRadius: 8,
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                    }}
                                >
                                    <span
                                        style={{
                                            color: "#6B7280",
                                            fontSize: 13,
                                        }}
                                    >
                                        Deposit Amount:
                                    </span>
                                    <span
                                        style={{
                                            fontWeight: 700,
                                            color: "#EA580C",
                                            fontSize: 18,
                                        }}
                                    >
                                        RM{" "}
                                        {(
                                            form.depositCustom || 0
                                        ).toLocaleString()}
                                    </span>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* Project Notes */}
                    <div style={{ ...cardStyle, padding: 16 }}>
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 16,
                            }}
                        >
                            <div
                                style={{
                                    fontSize: 15,
                                    fontWeight: 600,
                                    color: "#F97316",
                                }}
                            >
                                <Icon
                                    name="pin"
                                    size={16}
                                    style={{ marginRight: 7 }}
                                />
                                Project Notes
                            </div>
                            <button
                                onClick={addNote}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "none",
                                    backgroundColor: "#FFF7ED",
                                    color: "#EA580C",
                                    fontWeight: 600,
                                    fontSize: 12,
                                    cursor: "pointer",
                                }}
                            >
                                + Add
                            </button>
                        </div>
                        <div
                            style={{
                                fontSize: 12,
                                color: "#9CA3AF",
                                marginBottom: 12,
                            }}
                        >
                            Terms & conditions, payment terms, etc.
                        </div>

                        {(form.projectNotes || [""]).map((note, index) => (
                            <div
                                key={index}
                                style={{
                                    display: "flex",
                                    gap: 8,
                                    marginBottom: 10,
                                    alignItems: "flex-start",
                                }}
                            >
                                <span
                                    style={{
                                        color: "#F97316",
                                        padding: "10px 0",
                                    }}
                                >
                                    •
                                </span>
                                <input
                                    style={{ ...inputStyle, flex: 1 }}
                                    value={note}
                                    onChange={(e) =>
                                        updateNote(index, e.target.value)
                                    }
                                    placeholder={
                                        index === 0
                                            ? "cth: 30% deposit required to secure project timeline"
                                            : index === 1
                                              ? "cth: Quoted cost excludes third-party charges"
                                              : "cth: Minor revisions free for 7 days after handover"
                                    }
                                />
                                {(form.projectNotes || []).length > 1 && (
                                    <button
                                        onClick={() => removeNote(index)}
                                        style={{
                                            padding: "10px",
                                            borderRadius: 8,
                                            border: "none",
                                            backgroundColor: "#FEE2E2",
                                            color: "#DC2626",
                                            cursor: "pointer",
                                            fontSize: 14,
                                        }}
                                    >
                                        <Icon name="x" size={14} />
                                    </button>
                                )}
                            </div>
                        ))}
                    </div>

                    {/* Actions */}
                    <div
                        style={{
                            display: "flex",
                            flexDirection: "column",
                            gap: 10,
                        }}
                    >
                        <button
                            onClick={() => onSave(form)}
                            style={{
                                width: "100%",
                                padding: 14,
                                borderRadius: 10,
                                border: "none",
                                backgroundColor: "#F97316",
                                color: "#FFF",
                                fontWeight: 600,
                                fontSize: 15,
                                cursor: "pointer",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: 8,
                            }}
                        >
                            <Icon name="check" size={17} />
                            {isNew ? "Create Quotation" : "Save Changes"}
                        </button>
                        <button
                            onClick={onCancel}
                            style={{
                                width: "100%",
                                padding: 14,
                                borderRadius: 10,
                                border: "1px solid #E5E7EB",
                                backgroundColor: "#FFF",
                                color: "#374151",
                                fontWeight: 600,
                                fontSize: 15,
                                cursor: "pointer",
                            }}
                        >
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}

window.QuotationForm = QuotationForm