import { useState, useEffect, useCallback, useRef } from "react";
import { useNavigate } from "react-router-dom";
import api from "../../api/client";

const STATUS_STYLES = {
  draft:    { bg: "var(--bg-card-hover)", color: "var(--text-secondary)" },
  sent:     { bg: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" },
  accepted: { bg: "var(--success-bg)",   color: "var(--success-text)" },
  rejected: { bg: "var(--danger-bg)",    color: "var(--danger-text)" },
};

const STATUSES = ["draft", "sent", "accepted", "rejected"];

function fmt(n) {
  const f = parseFloat(n) || 0;
  return f.toLocaleString("el-GR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
}

function fmtDate(iso) {
  if (!iso) return "—";
  return iso.slice(0, 10);
}

// ── PDF thumbnail via PDF.js ──────────────────────────────────────────────────
function loadPdfJs() {
  return new Promise((res, rej) => {
    if (window.pdfjsLib) { res(); return; }
    if (document.getElementById("__pdfjs2__")) {
      const check = setInterval(() => {
        if (window.pdfjsLib) { clearInterval(check); res(); }
      }, 50);
      return;
    }
    const s = document.createElement("script");
    s.id = "__pdfjs2__";
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
    s.onload = () => {
      window.pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
      res();
    };
    s.onerror = rej;
    document.head.appendChild(s);
  });
}

function PdfThumbnail({ quotationId, onClick }) {
  const canvasRef = useRef(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        await loadPdfJs();
        const token = localStorage.getItem("access_token");
        const url = `/api/crm/quotations/${quotationId}/pdf`;
        const loadingTask = window.pdfjsLib.getDocument({
          url,
          httpHeaders: token ? { Authorization: `Bearer ${token}` } : {},
        });
        const pdf = await loadingTask.promise;
        if (cancelled) return;
        const page = await pdf.getPage(1);
        if (cancelled) return;
        const canvas = canvasRef.current;
        if (!canvas) return;
        const viewport = page.getViewport({ scale: 1 });
        const scale = Math.min(72 / viewport.width, 96 / viewport.height);
        const scaled = page.getViewport({ scale });
        canvas.width = scaled.width;
        canvas.height = scaled.height;
        await page.render({ canvasContext: canvas.getContext("2d"), viewport: scaled }).promise;
      } catch {
        if (!cancelled) setFailed(true);
      }
    })();
    return () => { cancelled = true; };
  }, [quotationId]);

  const style = {
    width: 72, height: 96, borderRadius: 4, overflow: "hidden", flexShrink: 0,
    cursor: "pointer", border: "1px solid var(--border-primary)",
    display: "flex", alignItems: "center", justifyContent: "center",
    backgroundColor: "var(--bg-primary)",
  };

  if (failed) {
    return (
      <div style={style} onClick={onClick} title="Open PDF">
        <span style={{ fontSize: 28 }}>📑</span>
      </div>
    );
  }

  return (
    <div style={style} onClick={onClick} title="Open PDF">
      <canvas ref={canvasRef} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
    </div>
  );
}

function DraftThumbnail() {
  return (
    <div style={{
      width: 72, height: 96, borderRadius: 4, flexShrink: 0,
      border: "1px dashed var(--border-primary)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      backgroundColor: "var(--bg-primary)", gap: 4,
    }}>
      <span style={{ fontSize: 18 }}>📄</span>
      <span style={{ fontSize: 9, fontWeight: 700, color: "var(--text-muted)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
        DRAFT
      </span>
    </div>
  );
}

function PdfViewModal({ quotationId, quotationNumber, onClose }) {
  const [blobUrl, setBlobUrl] = useState(null);
  const [loadingPdf, setLoadingPdf] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    let objectUrl = null;
    const token = localStorage.getItem("access_token");
    fetch(`/api/crm/quotations/${quotationId}/pdf`, {
      headers: token ? { Authorization: `Bearer ${token}` } : {},
    })
      .then(r => {
        if (!r.ok) throw new Error("Failed to load PDF");
        return r.blob();
      })
      .then(blob => {
        objectUrl = URL.createObjectURL(blob);
        setBlobUrl(objectUrl);
      })
      .catch(() => setError(true))
      .finally(() => setLoadingPdf(false));
    return () => { if (objectUrl) URL.revokeObjectURL(objectUrl); };
  }, [quotationId]);

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        backgroundColor: "rgba(0,0,0,0.88)",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          backgroundColor: "var(--bg-card)", borderRadius: 10, overflow: "hidden",
          width: "80vw", height: "88vh", display: "flex", flexDirection: "column",
          boxShadow: "0 24px 64px rgba(0,0,0,0.5)",
        }}
      >
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "10px 16px", borderBottom: "1px solid var(--border-primary)", flexShrink: 0,
        }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text-heading)" }}>{quotationNumber}</span>
          <div style={{ display: "flex", gap: 8 }}>
            {blobUrl && (
              <a
                href={blobUrl}
                download={`${quotationNumber}.pdf`}
                style={{ padding: "4px 12px", fontSize: 12, borderRadius: 6, textDecoration: "none", backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
              >
                Download
              </a>
            )}
            <button
              onClick={onClose}
              style={{ background: "none", border: "none", color: "var(--text-muted)", fontSize: 22, cursor: "pointer", lineHeight: 1, padding: "0 4px" }}
            >×</button>
          </div>
        </div>
        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
          {loadingPdf && <span style={{ color: "var(--text-muted)", fontSize: 13 }}>Loading PDF...</span>}
          {error && <span style={{ color: "var(--danger-text)", fontSize: 13 }}>Failed to load PDF.</span>}
          {blobUrl && (
            <iframe
              src={blobUrl}
              style={{ width: "100%", height: "100%", border: "none" }}
              title={quotationNumber}
            />
          )}
        </div>
      </div>
    </div>
  );
}

// ── Legacy Quotation Modal ─────────────────────────────────────────────────────
function LegacyQuotationModal({ customerId, existing, onClose, onSaved }) {
  const isEdit = !!existing;
  const [form, setForm] = useState({
    title: existing?.title || "",
    quotation_number: existing?.quotation_number || "",
    legacy_date: existing?.legacy_date || new Date().toISOString().slice(0, 10),
    status: existing?.status || "sent",
    final_total: existing?.final_total != null ? String(existing.final_total) : "",
  });
  const [pdfFile, setPdfFile] = useState(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const inputStyle = {
    width: "100%", padding: "7px 10px", fontSize: 13, borderRadius: 6,
    border: "1px solid var(--border-primary)", backgroundColor: "var(--bg-primary)",
    color: "var(--text-primary)", outline: "none", boxSizing: "border-box",
  };
  const labelStyle = { fontSize: 11, fontWeight: 600, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4, display: "block" };

  async function handleSave() {
    if (!form.title.trim()) { setError("Title is required"); return; }
    setSaving(true);
    setError("");
    try {
      let quotation;
      if (isEdit) {
        quotation = await api.put(`/crm/quotations/${existing.id}`, {
          title: form.title,
          status: form.status,
          legacy_date: form.legacy_date || null,
          extras_cost: parseFloat(form.final_total) || 0,
        });
      } else {
        quotation = await api.post("/crm/quotations", {
          customer_id: customerId,
          title: form.title,
          status: form.status,
          is_legacy: true,
          legacy_date: form.legacy_date || null,
          // Use extras_cost to carry the total for legacy quotations (no line items)
          extras_cost: parseFloat(form.final_total) || 0,
        });
      }

      // Upload PDF if provided
      if (pdfFile) {
        await api.upload(`/crm/quotations/${quotation.id}/legacy-pdf`, pdfFile);
      }

      onSaved();
      onClose();
    } catch (e) {
      setError(e?.message || "Failed to save");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div
      onClick={onClose}
      style={{ position: "fixed", inset: 0, zIndex: 1000, backgroundColor: "rgba(0,0,0,0.6)", display: "flex", alignItems: "center", justifyContent: "center" }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          backgroundColor: "var(--bg-card)", borderRadius: 10, width: 480, maxWidth: "95vw",
          boxShadow: "0 24px 64px rgba(0,0,0,0.45)", display: "flex", flexDirection: "column",
        }}
      >
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 20px", borderBottom: "1px solid var(--border-primary)" }}>
          <span style={{ fontSize: 14, fontWeight: 700, color: "var(--text-heading)" }}>
            {isEdit ? "Edit Legacy Quotation" : "Add Legacy Quotation"}
          </span>
          <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--text-muted)", fontSize: 22, cursor: "pointer", lineHeight: 1 }}>×</button>
        </div>

        {/* Body */}
        <div style={{ padding: "20px", display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Title */}
          <div>
            <label style={labelStyle}>Title *</label>
            <input
              style={inputStyle}
              value={form.title}
              onChange={e => setForm(f => ({ ...f, title: e.target.value }))}
              placeholder="e.g. Church Sound System Offer"
            />
          </div>

          {/* Date + Status */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label style={labelStyle}>Date</label>
              <input
                type="date"
                style={inputStyle}
                value={form.legacy_date}
                onChange={e => setForm(f => ({ ...f, legacy_date: e.target.value }))}
              />
            </div>
            <div>
              <label style={labelStyle}>Status</label>
              <select
                style={inputStyle}
                value={form.status}
                onChange={e => setForm(f => ({ ...f, status: e.target.value }))}
              >
                {STATUSES.map(s => <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>)}
              </select>
            </div>
          </div>

          {/* Total */}
          <div>
            <label style={labelStyle}>Total Amount (€)</label>
            <input
              type="number"
              min="0"
              step="0.01"
              style={inputStyle}
              value={form.final_total}
              onChange={e => setForm(f => ({ ...f, final_total: e.target.value }))}
              placeholder="0.00"
            />
          </div>

          {/* PDF upload */}
          <div>
            <label style={labelStyle}>PDF File (optional)</label>
            <input
              type="file"
              accept="application/pdf"
              style={{ ...inputStyle, padding: "5px 10px" }}
              onChange={e => setPdfFile(e.target.files?.[0] || null)}
            />
            {existing?.legacy_pdf_path && !pdfFile && (
              <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 4 }}>
                Current: {existing.legacy_pdf_path.split("/").pop()}
              </div>
            )}
          </div>

          {error && <div style={{ fontSize: 12, color: "var(--danger-text)" }}>{error}</div>}
        </div>

        {/* Footer */}
        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", padding: "12px 20px", borderTop: "1px solid var(--border-primary)" }}>
          <button
            onClick={onClose}
            style={{ padding: "7px 18px", fontSize: 13, borderRadius: 6, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-secondary)" }}
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
            style={{ padding: "7px 18px", fontSize: 13, fontWeight: 600, borderRadius: 6, border: "none", cursor: "pointer", backgroundColor: "var(--accent)", color: "#fff" }}
          >
            {saving ? "Saving..." : isEdit ? "Save Changes" : "Add Legacy"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Main Component ─────────────────────────────────────────────────────────────
export default function QuotationList({ customerId, onSend }) {
  const navigate = useNavigate();
  const [quotations, setQuotations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [deleting, setDeleting] = useState(null);
  const [regenerating, setRegenerating] = useState(null);
  const [pdfPreview, setPdfPreview] = useState(null); // { id, number }
  const [showLegacyModal, setShowLegacyModal] = useState(false);
  const [editingLegacy, setEditingLegacy] = useState(null);

  const load = useCallback(async () => {
    if (!customerId) return;
    setLoading(true);
    try {
      const res = await api.get(`/crm/quotations/customer/${customerId}`);
      setQuotations(res.quotations || []);
    } catch {
      setQuotations([]);
    } finally {
      setLoading(false);
    }
  }, [customerId]);

  useEffect(() => { load(); }, [load]);

  const regular = quotations.filter(q => !q.is_legacy);
  const legacy = quotations.filter(q => q.is_legacy);

  async function handleDelete(q) {
    if (!window.confirm(`Delete quotation ${q.quotation_number}? This cannot be undone.`)) return;
    setDeleting(q.id);
    try {
      await api.delete(`/crm/quotations/${q.id}`);
      setQuotations(prev => prev.filter(x => x.id !== q.id));
    } catch {
      alert("Failed to delete quotation");
    } finally {
      setDeleting(null);
    }
  }

  async function handleRegenerate(q) {
    setRegenerating(q.id);
    try {
      const updated = await api.post(`/crm/quotations/${q.id}/regenerate-pdf`);
      setQuotations(prev => prev.map(x => x.id === updated.id ? { ...x, nextcloud_pdf_url: updated.nextcloud_pdf_url } : x));
    } catch {
      alert("PDF regeneration failed");
    } finally {
      setRegenerating(null);
    }
  }

  function openPdfModal(q) {
    setPdfPreview({ id: q.id, number: q.quotation_number });
  }

  // Grid columns: thumbnail | number | title | date | status | total | actions
  // Delete button is a hover-only overlay — no dedicated column needed
  const GRID = "90px 120px minmax(0,1fr) 130px 130px 130px 90px";

  function renderRow(q, isLegacy = false, index = 0) {
    const hasPdf = isLegacy ? !!q.legacy_pdf_path : !!q.nextcloud_pdf_url;
    const displayDate = isLegacy ? (q.legacy_date || fmtDate(q.created_at)) : fmtDate(q.created_at);
    const isDeleting = deleting === q.id;

    return (
      <div
        key={q.id}
        className="quotation-row"
        style={{
          position: "relative",
          display: "grid",
          gridTemplateColumns: GRID,
          gap: 12,
          padding: "12px 16px",
          borderBottom: "1px solid var(--border-secondary)",
          alignItems: "center",
          minHeight: 110,
          backgroundColor: index % 2 === 1 ? "color-mix(in srgb, var(--bg-card) 97%, white)" : "var(--bg-card)",
        }}
        onMouseEnter={e => e.currentTarget.style.backgroundColor = "var(--bg-card-hover)"}
        onMouseLeave={e => e.currentTarget.style.backgroundColor = index % 2 === 1 ? "color-mix(in srgb, var(--bg-card) 97%, white)" : "var(--bg-card)"}
      >
        {/* Thumbnail */}
        <div>
          {hasPdf ? (
            <PdfThumbnail quotationId={q.id} onClick={() => openPdfModal(q)} />
          ) : (
            <DraftThumbnail />
          )}
        </div>

        {/* Number */}
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <span style={{ fontFamily: "monospace", fontSize: 13, fontWeight: 600, color: "var(--text-primary)" }}>
            {q.quotation_number}
          </span>
          {isLegacy && (
            <span style={{
              display: "inline-block", padding: "1px 6px", borderRadius: 4,
              fontSize: 9, fontWeight: 700, letterSpacing: "0.08em",
              backgroundColor: "var(--badge-orange-bg, #7c3a0020)", color: "var(--badge-orange-text, #c0621e)",
              textTransform: "uppercase", alignSelf: "flex-start",
            }}>
              LEGACY
            </span>
          )}
        </div>

        {/* Title */}
        <div style={{ overflow: "hidden", paddingRight: 8 }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {q.title || <span style={{ color: "var(--text-muted)", fontStyle: "italic", fontWeight: 400 }}>Untitled</span>}
          </div>
        </div>

        {/* Date */}
        <div style={{ fontSize: 12, color: "var(--text-secondary)", textAlign: "center" }}>
          {displayDate}
        </div>

        {/* Status badge */}
        <div style={{ textAlign: "center" }}>
          <span style={{
            display: "inline-block", padding: "2px 10px", borderRadius: 20,
            fontSize: 11, fontWeight: 600,
            backgroundColor: STATUS_STYLES[q.status]?.bg || "var(--bg-card-hover)",
            color: STATUS_STYLES[q.status]?.color || "var(--text-secondary)",
          }}>
            {q.status}
          </span>
        </div>

        {/* Total */}
        <div style={{ fontSize: 16, fontWeight: 600, color: "var(--success-text)", textAlign: "right", paddingRight: 16 }}>
          {fmt(q.final_total)}
        </div>

        {/* Actions (Edit / Send / Gen PDF — no Delete here) */}
        <div style={{ display: "flex", flexDirection: "column", gap: 5, alignItems: "stretch" }}>
          {isLegacy ? (
            <button
              onClick={() => { setEditingLegacy(q); setShowLegacyModal(true); }}
              style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-secondary)", whiteSpace: "nowrap", textAlign: "center" }}
            >
              Edit
            </button>
          ) : (
            <>
              {!q.nextcloud_pdf_url && (
                <button
                  onClick={() => handleRegenerate(q)}
                  disabled={regenerating === q.id}
                  style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-muted)", whiteSpace: "nowrap", textAlign: "center" }}
                >
                  {regenerating === q.id ? "..." : "Gen PDF"}
                </button>
              )}
              <button
                onClick={() => navigate(`/crm/quotations/${q.id}`)}
                style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-secondary)", whiteSpace: "nowrap", textAlign: "center" }}
              >
                Edit
              </button>
              <button
                onClick={() => onSend && onSend(q)}
                style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--accent)", whiteSpace: "nowrap", textAlign: "center" }}
              >
                Send
              </button>
            </>
          )}
        </div>

        {/* Delete — hover-only overlay in top-right corner */}
        <button
          onClick={() => handleDelete(q)}
          disabled={isDeleting}
          className="quotation-delete-btn"
          style={{
            position: "absolute", top: 8, right: 10,
            padding: "3px 10px", fontSize: 11, fontWeight: 600, borderRadius: 5,
            border: "1px solid rgba(239,68,68,0.4)",
            backgroundColor: "rgba(239,68,68,0.08)", color: "var(--danger-text)",
            cursor: "pointer", opacity: 0, transition: "opacity 0.15s",
            whiteSpace: "nowrap",
          }}
        >
          {isDeleting ? "..." : "Delete"}
        </button>
      </div>
    );
  }

  function TableHeader() {
    return (
      <div style={{
        display: "grid",
        gridTemplateColumns: GRID,
        backgroundColor: "var(--bg-card)",
        borderBottom: "1px solid var(--border-primary)",
        padding: "8px 16px",
        alignItems: "center",
        gap: 12,
      }}>
        <div />
        {[
          { label: "Number",  align: "left"   },
          { label: "Title",   align: "left"   },
          { label: "Date",    align: "center" },
          { label: "Status",  align: "center" },
          { label: "Total",   align: "right",  paddingRight: 16 },
          { label: "Actions", align: "center" },
        ].map(({ label, align, paddingRight }) => (
          <div key={label} style={{ fontSize: 11, fontWeight: 600, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.04em", textAlign: align, paddingRight }}>
            {label}
          </div>
        ))}
      </div>
    );
  }

  return (
    <div>
      {/* PDF Preview Modal */}
      {pdfPreview && (
        <PdfViewModal
          quotationId={pdfPreview.id}
          quotationNumber={pdfPreview.number}
          onClose={() => setPdfPreview(null)}
        />
      )}

      {/* Legacy Quotation Modal */}
      {showLegacyModal && (
        <LegacyQuotationModal
          customerId={customerId}
          existing={editingLegacy}
          onClose={() => { setShowLegacyModal(false); setEditingLegacy(null); }}
          onSaved={load}
        />
      )}

      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <h2 style={{ fontSize: 15, fontWeight: 600, color: "var(--text-heading)" }}>Quotations</h2>
        <div style={{ display: "flex", gap: 8 }}>
          <button
            onClick={() => { setEditingLegacy(null); setShowLegacyModal(true); }}
            style={{
              padding: "7px 14px", fontSize: 13, fontWeight: 600, borderRadius: 6,
              border: "1px solid var(--border-primary)", cursor: "pointer",
              backgroundColor: "transparent", color: "var(--text-secondary)",
            }}
          >
            + Legacy
          </button>
          <button
            onClick={() => navigate(`/crm/quotations/new?customer_id=${customerId}`)}
            style={{
              padding: "7px 16px", fontSize: 13, fontWeight: 600, borderRadius: 6,
              border: "none", cursor: "pointer", backgroundColor: "var(--accent)", color: "#fff",
            }}
          >
            + New Quotation
          </button>
        </div>
      </div>

      {loading && (
        <div style={{ textAlign: "center", padding: 40, color: "var(--text-muted)", fontSize: 13 }}>Loading...</div>
      )}

      {!loading && regular.length === 0 && legacy.length === 0 && (
        <div style={{ textAlign: "center", padding: "40px 20px", backgroundColor: "var(--bg-card)", border: "1px solid var(--border-primary)", borderRadius: 8 }}>
          <div style={{ fontSize: 32, marginBottom: 10 }}>📄</div>
          <div style={{ fontSize: 14, fontWeight: 500, color: "var(--text-heading)", marginBottom: 6 }}>No quotations yet</div>
          <div style={{ fontSize: 13, color: "var(--text-muted)", marginBottom: 16 }}>
            Create a quotation to generate a professional PDF offer for this customer.
          </div>
          <button
            onClick={() => navigate(`/crm/quotations/new?customer_id=${customerId}`)}
            style={{ padding: "8px 20px", fontSize: 13, fontWeight: 600, borderRadius: 6, border: "none", cursor: "pointer", backgroundColor: "var(--accent)", color: "#fff" }}
          >
            + New Quotation
          </button>
        </div>
      )}

      {/* Regular quotations table */}
      {!loading && regular.length > 0 && (
        <div style={{ borderRadius: 8, border: "1px solid var(--border-primary)", overflow: "hidden", marginBottom: legacy.length > 0 ? 24 : 0 }}>
          <TableHeader />
          {regular.map((q, i) => renderRow(q, false, i))}
        </div>
      )}

      {/* Legacy quotations section — only shown if any exist */}
      {!loading && legacy.length > 0 && (
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10, marginTop: regular.length > 0 ? 0 : 0 }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              Legacy Quotations
            </span>
            <span style={{
              display: "inline-block", padding: "1px 8px", borderRadius: 10,
              fontSize: 11, fontWeight: 600,
              backgroundColor: "var(--badge-orange-bg, rgba(124,58,0,0.12))",
              color: "var(--badge-orange-text, #c0621e)",
            }}>
              {legacy.length}
            </span>
          </div>
          <div style={{ borderRadius: 8, border: "1px solid var(--border-primary)", overflow: "hidden" }}>
            <TableHeader />
            {legacy.map((q, i) => renderRow(q, true, i))}
          </div>
        </div>
      )}
    </div>
  );
}
