"use client";
import CommonError from "@/app/components/CommonError";
import { usePayment } from "./_hooks";

// ── Replace these with real QR PNG paths once you have them ──────────────────
const BKASH_QR      = "/payment/bkash-qr.png";
const NAGAD_QR      = "/payment/nagad-qr.png";
const BKASH_NUMBER  = "01XXXXXXXXX";   // ← replace with real merchant number
const NAGAD_NUMBER  = "01XXXXXXXXX";   // ← replace with real merchant number
const MONTHLY_AMOUNT = 500;             // BDT

// ── QR fallback URL (generated on the fly if PNG missing) ────────────────────
const qrFallback = (label: string) =>
  `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(label)}`;

export default function PaymentSection() {
  const {
    status, activeTab, setActiveTab,
    txId, setTxId, amount, setAmount,
    cardNumber, setCardNumber, expiry, setExpiry, cvv, setCvv,
    loading, message, messageType, handleSubmit,
  } = usePayment();

  if (!status) {
    return (
      <div className="card mb-5">
        <div className="card-body text-center py-5">
          <div className="spinner-border text-primary" role="status">
            <span className="visually-hidden">Loading…</span>
          </div>
        </div>
      </div>
    );
  }

  const isOverdue = !status.paid_this_month && !status.grace_period;

  return (
    <>
      {/* ── Alert: reminder (days 1-10, unpaid, every 2 days) ── */}
      {status.show_alert && !status.paid_this_month && (
        <div className="alert alert-warning d-flex align-items-start gap-2 mb-4" role="alert">
          <span className="fa-solid fa-triangle-exclamation fs-5 mt-1 flex-shrink-0" />
          <div>
            <strong>Payment Reminder</strong> — Day {status.today_day} of 10.
            Please pay your monthly subscription to keep your access active.
          </div>
        </div>
      )}

      {/* ── Alert: access suspended ── */}
      {isOverdue && (
        <div className="alert alert-danger d-flex align-items-start gap-2 mb-4" role="alert">
          <span className="fa-solid fa-lock fs-5 mt-1 flex-shrink-0" />
          <div>
            <strong>Access Suspended</strong> — Your subscription payment was not received
            within the grace period (days 1–10). Pay now to restore access immediately.
          </div>
        </div>
      )}

      {/* ── Alert: paid ── */}
      {status.paid_this_month && (
        <div className="alert alert-success d-flex align-items-center gap-2 mb-4" role="alert">
          <span className="fa-solid fa-circle-check fs-5 flex-shrink-0" />
          <div>
            <strong>Subscription Active</strong> — Your payment for this month has been
            received. Thank you!
          </div>
        </div>
      )}

      <div className="card mb-5">
        <div className="card-header d-flex align-items-center gap-2">
          <span className="fa-solid fa-credit-card text-primary" />
          <h5 className="mb-0">Monthly Subscription Payment</h5>
        </div>

        <div className="card-body">
          <CommonError message={message} type={messageType} />

          {/* ── Method tabs ── */}
          <ul className="nav nav-pills mb-4 gap-2 flex-wrap">
            {(["bkash", "nagad", "card"] as const).map((tab) => (
              <li key={tab} className="nav-item">
                <button
                  type="button"
                  className={`nav-link ${activeTab === tab ? "active" : ""}`}
                  onClick={() => setActiveTab(tab)}
                >
                  {tab === "bkash" && <span className="me-1" style={{ color: "#E2136E" }}>●</span>}
                  {tab === "nagad" && <span className="me-1" style={{ color: "#F7941D" }}>●</span>}
                  {tab === "card"  && <span className="fa-solid fa-credit-card me-1" />}
                  {tab.charAt(0).toUpperCase() + tab.slice(1)}
                </button>
              </li>
            ))}
          </ul>

          {/* ── Form ── */}
          <form onSubmit={handleSubmit}>

            {/* ── bKash ── */}
            {activeTab === "bkash" && (
              <div className="row g-4 align-items-start">
                <div className="col-12 col-md-5 text-center">
                  <div
                    className="border rounded p-3 d-inline-block mb-2"
                    style={{ background: "#fff5f9" }}
                  >
                    <img
                      src={BKASH_QR}
                      alt="bKash QR"
                      width={180}
                      height={180}
                      onError={(e) => {
                        (e.target as HTMLImageElement).src = qrFallback("bkash:" + BKASH_NUMBER);
                      }}
                    />
                  </div>
                  <div className="text-muted small">
                    Scan with <strong style={{ color: "#E2136E" }}>bKash</strong> app
                  </div>
                  <div className="fw-semibold mt-1 small">
                    <span className="fa-solid fa-phone me-1" />
                    {BKASH_NUMBER}
                  </div>
                </div>
                <div className="col-12 col-md-7">
                  <ol className="text-muted small mb-3 ps-3">
                    <li>Open bKash app → <strong>Send Money</strong></li>
                    <li>Scan the QR or enter the number above</li>
                    <li>Enter amount: <strong>BDT {MONTHLY_AMOUNT}</strong></li>
                    <li>Copy the <strong>Transaction ID</strong> from your confirmation SMS</li>
                    <li>Paste it below and click Confirm</li>
                  </ol>
                  <div className="mb-3">
                    <label className="form-label fw-semibold">Amount (BDT)</label>
                    <input
                      type="number" className="form-control"
                      placeholder={String(MONTHLY_AMOUNT)}
                      value={amount} onChange={(e) => setAmount(e.target.value)} required
                    />
                  </div>
                  <div className="mb-3">
                    <label className="form-label fw-semibold">bKash Transaction ID</label>
                    <input
                      type="text" className="form-control"
                      placeholder="e.g. 8N7A6B5C4D"
                      value={txId} onChange={(e) => setTxId(e.target.value)} required
                    />
                    <div className="form-text">Check your bKash confirmation SMS.</div>
                  </div>
                  <button
                    type="submit" className="btn w-100" disabled={loading}
                    style={{ background: "#E2136E", borderColor: "#E2136E", color: "#fff" }}
                  >
                    {loading
                      ? <span className="spinner-border spinner-border-sm me-2" />
                      : <span className="fa-solid fa-check me-2" />}
                    Confirm bKash Payment
                  </button>
                </div>
              </div>
            )}

            {/* ── Nagad ── */}
            {activeTab === "nagad" && (
              <div className="row g-4 align-items-start">
                <div className="col-12 col-md-5 text-center">
                  <div
                    className="border rounded p-3 d-inline-block mb-2"
                    style={{ background: "#fff8f0" }}
                  >
                    <img
                      src={NAGAD_QR}
                      alt="Nagad QR"
                      width={180}
                      height={180}
                      onError={(e) => {
                        (e.target as HTMLImageElement).src = qrFallback("nagad:" + NAGAD_NUMBER);
                      }}
                    />
                  </div>
                  <div className="text-muted small">
                    Scan with <strong style={{ color: "#F7941D" }}>Nagad</strong> app
                  </div>
                  <div className="fw-semibold mt-1 small">
                    <span className="fa-solid fa-phone me-1" />
                    {NAGAD_NUMBER}
                  </div>
                </div>
                <div className="col-12 col-md-7">
                  <ol className="text-muted small mb-3 ps-3">
                    <li>Open Nagad app → <strong>Send Money</strong></li>
                    <li>Scan the QR or enter the number above</li>
                    <li>Enter amount: <strong>BDT {MONTHLY_AMOUNT}</strong></li>
                    <li>Copy the <strong>Transaction ID</strong> from your SMS</li>
                    <li>Paste it below and click Confirm</li>
                  </ol>
                  <div className="mb-3">
                    <label className="form-label fw-semibold">Amount (BDT)</label>
                    <input
                      type="number" className="form-control"
                      placeholder={String(MONTHLY_AMOUNT)}
                      value={amount} onChange={(e) => setAmount(e.target.value)} required
                    />
                  </div>
                  <div className="mb-3">
                    <label className="form-label fw-semibold">Nagad Transaction ID</label>
                    <input
                      type="text" className="form-control"
                      placeholder="e.g. NA12345678"
                      value={txId} onChange={(e) => setTxId(e.target.value)} required
                    />
                    <div className="form-text">Check your Nagad confirmation SMS.</div>
                  </div>
                  <button
                    type="submit" className="btn w-100" disabled={loading}
                    style={{ background: "#F7941D", borderColor: "#F7941D", color: "#fff" }}
                  >
                    {loading
                      ? <span className="spinner-border spinner-border-sm me-2" />
                      : <span className="fa-solid fa-check me-2" />}
                    Confirm Nagad Payment
                  </button>
                </div>
              </div>
            )}

            {/* ── Card ── */}
            {activeTab === "card" && (
              <div className="row g-3">
                {/* Live card preview */}
                <div className="col-12">
                  <div
                    className="rounded-3 p-4 mb-1 position-relative overflow-hidden"
                    style={{
                      background: "linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%)",
                      color: "#fff",
                      minHeight: 160,
                    }}
                  >
                    <div className="d-flex justify-content-between align-items-start mb-4">
                      <div>
                        <div className="small opacity-75 text-uppercase ls-2">Nuclear Software</div>
                        <div className="fw-semibold">Monthly Subscription</div>
                      </div>
                      <div className="fs-3 opacity-75">
                        <span className="fa-brands fa-cc-visa me-2" />
                        <span className="fa-brands fa-cc-mastercard" />
                      </div>
                    </div>
                    <div className="fs-5 font-monospace mb-3 letter-spacing-2">
                      {cardNumber
                        ? cardNumber.padEnd(19, "•").replace(/(.{4})/g, "$1 ").trim()
                        : "•••• •••• •••• ••••"}
                    </div>
                    <div className="d-flex gap-4 small opacity-75">
                      <span>EXPIRES {expiry || "MM/YY"}</span>
                      <span>CVV {cvv ? "•••" : "•••"}</span>
                    </div>
                  </div>
                </div>

                <div className="col-12">
                  <label className="form-label fw-semibold">Card Number</label>
                  <input
                    type="text" className="form-control font-monospace"
                    placeholder="1234 5678 9012 3456" maxLength={19}
                    value={cardNumber}
                    onChange={(e) => {
                      const v = e.target.value.replace(/\D/g, "").slice(0, 16);
                      setCardNumber(v.replace(/(.{4})/g, "$1 ").trim());
                    }}
                    required
                  />
                </div>
                <div className="col-6">
                  <label className="form-label fw-semibold">Expiry Date</label>
                  <input
                    type="text" className="form-control"
                    placeholder="MM/YY" maxLength={5}
                    value={expiry}
                    onChange={(e) => {
                      let v = e.target.value.replace(/\D/g, "").slice(0, 4);
                      if (v.length > 2) v = v.slice(0, 2) + "/" + v.slice(2);
                      setExpiry(v);
                    }}
                    required
                  />
                </div>
                <div className="col-6">
                  <label className="form-label fw-semibold">CVV</label>
                  <input
                    type="password" className="form-control"
                    placeholder="•••" maxLength={4}
                    value={cvv}
                    onChange={(e) => setCvv(e.target.value.replace(/\D/g, "").slice(0, 4))}
                    required
                  />
                </div>
                <div className="col-12">
                  <label className="form-label fw-semibold">Amount (BDT)</label>
                  <input
                    type="number" className="form-control"
                    placeholder={String(MONTHLY_AMOUNT)}
                    value={amount} onChange={(e) => setAmount(e.target.value)} required
                  />
                </div>
                <div className="col-12">
                  <button
                    type="submit" className="btn btn-primary w-100" disabled={loading}
                  >
                    {loading
                      ? <span className="spinner-border spinner-border-sm me-2" />
                      : <span className="fa-solid fa-lock me-2" />}
                    Pay Securely
                  </button>
                  <p className="text-center text-muted small mt-2 mb-0">
                    <span className="fa-solid fa-shield-halved me-1" />
                    SSL Secured Payment
                  </p>
                </div>
              </div>
            )}
          </form>

          {/* ── Payment History ── */}
          {status.payments.length > 0 && (
            <div className="mt-5 border-top pt-4">
              <h6 className="mb-3 text-muted">
                <span className="fa-solid fa-clock-rotate-left me-1" />
                Payment History
              </h6>
              <div className="table-responsive">
                <table className="table table-sm table-hover align-middle">
                  <thead className="table-light">
                    <tr>
                      <th>Date</th>
                      <th>Method</th>
                      <th>Transaction ID</th>
                      <th>Amount</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {status.payments.map((p) => (
                      <tr key={p.id}>
                        <td className="small">
                          {new Date(p.created_at).toLocaleDateString()}
                        </td>
                        <td>
                          <span
                            className={`badge ${
                              p.payment_method === "bkash" ? "text-white"
                              : p.payment_method === "nagad" ? "text-dark"
                              : "bg-primary"
                            }`}
                            style={
                              p.payment_method === "bkash"
                                ? { background: "#E2136E" }
                                : p.payment_method === "nagad"
                                ? { background: "#F7941D" }
                                : {}
                            }
                          >
                            {p.payment_method.toUpperCase()}
                          </span>
                        </td>
                        <td className="small font-monospace">
                          {p.transaction_id || "—"}
                        </td>
                        <td className="small">BDT {p.amount}</td>
                        <td>
                          <span
                            className={`badge ${
                              p.payment_status === "completed" ? "bg-success"
                              : p.payment_status === "failed"    ? "bg-danger"
                              : "bg-secondary"
                            }`}
                          >
                            {p.payment_status}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
}