import { useState } from "react";

const initialCart = [
  { id: 1, name: "DAP Fertilizer", variant: "50kg Bag", price: 3850, qty: 2, unit: "bag", emoji: "🌱" },
  { id: 2, name: "CAN Fertilizer", variant: "50kg Bag", price: 3200, qty: 1, unit: "bag", emoji: "🧪" },
  { id: 3, name: "H614D Maize Seeds", variant: "10kg Packet", price: 1450, qty: 3, unit: "packet", emoji: "🌽" },
  { id: 4, name: "Roundup Herbicide", variant: "1 Litre", price: 890, qty: 1, unit: "bottle", emoji: "🪴" },
];

const NANDI_SUBCOUNTIES = [
  "Aldai", "Chesumei", "Emgwen", "Mosop", "Nandi Hills", "Tindiret"
];

const formatKES = (n) => `KES ${Number(n).toLocaleString("en-KE", { minimumFractionDigits: 0 })}`;

const DELIVERY_FEE = 350;

export default function FarmCart() {
  const [page, setPage] = useState("cart");
  const [cart, setCart] = useState(initialCart);
  const [form, setForm] = useState({
    fullName: "", phone: "", location: "", delivery: "pickup", instructions: ""
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const updateQty = (id, delta) => {
    setCart(c => c.map(item =>
      item.id === id ? { ...item, qty: Math.max(1, item.qty + delta) } : item
    ));
  };
  const removeItem = (id) => setCart(c => c.filter(item => item.id !== id));

  const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const deliveryFee = form.delivery === "deliver" ? DELIVERY_FEE : 0;
  const total = subtotal + deliveryFee;

  const validate = () => {
    const e = {};
    if (!form.fullName.trim()) e.fullName = "Full name is required";
    if (!form.phone.trim()) e.phone = "Phone number is required";
    else if (!/^(\+254|0)[17]\d{8}$/.test(form.phone.replace(/\s/g, "")))
      e.phone = "Enter a valid Kenyan phone number (e.g. 0712345678)";
    if (!form.location) e.location = "Please select a delivery location";
    return e;
  };

  const handleSubmit = () => {
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) setSubmitted(true);
  };

  const setField = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => ({ ...e, [k]: undefined }));
  };

  if (submitted) {
    return (
      <div style={styles.page}>
        <div style={styles.successCard}>
          <div style={styles.successIcon}>✓</div>
          <h2 style={styles.successTitle}>Order Placed!</h2>
          <p style={styles.successSub}>
            Thank you, <strong>{form.fullName}</strong>. We'll send payment instructions to{" "}
            <strong>{form.phone}</strong> via M-Pesa shortly.
          </p>
          <div style={styles.successDetails}>
            <div style={styles.successRow}><span>Order Total</span><span style={{ fontWeight: 600, color: "#1a4d2e" }}>{formatKES(total)}</span></div>
            <div style={styles.successRow}><span>Delivery</span><span>{form.delivery === "pickup" ? "Pick Up" : `Deliver to ${form.location}`}</span></div>
          </div>
          <button style={styles.backBtn} onClick={() => { setSubmitted(false); setPage("cart"); setCart(initialCart); setForm({ fullName: "", phone: "", location: "", delivery: "pickup", instructions: "" }); }}>
            Continue Shopping
          </button>
        </div>
      </div>
    );
  }

  if (page === "checkout") {
    return (
      <div style={styles.page}>
        <header style={styles.header}>
          <button style={styles.backLink} onClick={() => setPage("cart")}>← Back to Cart</button>
          <div style={styles.brand}>🌾 AgroNandi Inputs</div>
        </header>

        <h1 style={styles.pageTitle}>Checkout</h1>

        <div style={styles.checkoutGrid}>
          {/* LEFT: Form */}
          <div style={styles.formCard}>
            <h2 style={styles.sectionTitle}>Delivery Details</h2>

            <div style={styles.field}>
              <label style={styles.label}>Full Name <span style={styles.req}>*</span></label>
              <input
                style={{ ...styles.input, ...(errors.fullName ? styles.inputErr : {}) }}
                placeholder="e.g. Jane Chebet"
                value={form.fullName}
                onChange={e => setField("fullName", e.target.value)}
              />
              {errors.fullName && <p style={styles.errMsg}>{errors.fullName}</p>}
            </div>

            <div style={styles.field}>
              <label style={styles.label}>Phone Number (M-Pesa) <span style={styles.req}>*</span></label>
              <input
                style={{ ...styles.input, ...(errors.phone ? styles.inputErr : {}) }}
                placeholder="e.g. 0712 345 678"
                value={form.phone}
                onChange={e => setField("phone", e.target.value)}
                type="tel"
              />
              <p style={styles.hint}>Used to send M-Pesa payment prompt</p>
              {errors.phone && <p style={styles.errMsg}>{errors.phone}</p>}
            </div>

            <div style={styles.field}>
              <label style={styles.label}>Sub-County <span style={styles.req}>*</span></label>
              <select
                style={{ ...styles.input, ...(errors.location ? styles.inputErr : {}), background: "var(--color-background-primary)" }}
                value={form.location}
                onChange={e => setField("location", e.target.value)}
              >
                <option value="">-- Select Sub-County in Nandi County --</option>
                {NANDI_SUBCOUNTIES.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
              {errors.location && <p style={styles.errMsg}>{errors.location}</p>}
            </div>

            <div style={styles.field}>
              <label style={styles.label}>Delivery Method <span style={styles.req}>*</span></label>
              <div style={styles.deliveryRow}>
                {["pickup", "deliver"].map(opt => (
                  <button
                    key={opt}
                    style={{ ...styles.deliveryBtn, ...(form.delivery === opt ? styles.deliveryBtnActive : {}) }}
                    onClick={() => setField("delivery", opt)}
                  >
                    <span style={{ fontSize: 18 }}>{opt === "pickup" ? "🏪" : "🚚"}</span>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{opt === "pickup" ? "Pick Up" : "Deliver"}</div>
                      <div style={{ fontSize: 12, opacity: 0.7 }}>{opt === "pickup" ? "Free · Come to us" : `+${formatKES(DELIVERY_FEE)}`}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>

            <div style={styles.field}>
              <label style={styles.label}>Special Instructions <span style={styles.optional}>(optional)</span></label>
              <textarea
                style={{ ...styles.input, height: 80, resize: "vertical" }}
                placeholder="e.g. Deliver before noon, call before arriving..."
                value={form.instructions}
                onChange={e => setField("instructions", e.target.value)}
              />
            </div>

            <button style={styles.submitBtn} onClick={handleSubmit}>
              Place Order · {formatKES(total)}
            </button>
            <p style={styles.mpesaNote}>💚 Payment via M-Pesa STK Push will be sent to your phone</p>
          </div>

          {/* RIGHT: Order Summary */}
          <div style={styles.summaryCard}>
            <h2 style={styles.sectionTitle}>Order Summary</h2>
            <div style={styles.summaryItems}>
              {cart.map(item => (
                <div key={item.id} style={styles.summaryItem}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={styles.summaryEmoji}>{item.emoji}</span>
                    <div>
                      <div style={styles.summaryName}>{item.name}</div>
                      <div style={styles.summaryVariant}>{item.variant} × {item.qty}</div>
                    </div>
                  </div>
                  <div style={styles.summaryPrice}>{formatKES(item.price * item.qty)}</div>
                </div>
              ))}
            </div>
            <div style={styles.divider} />
            <div style={styles.totalRows}>
              <div style={styles.totalRow}><span>Subtotal</span><span>{formatKES(subtotal)}</span></div>
              <div style={styles.totalRow}>
                <span>Delivery</span>
                <span style={form.delivery === "pickup" ? { color: "#1a4d2e", fontWeight: 600 } : {}}>
                  {form.delivery === "pickup" ? "Free" : formatKES(DELIVERY_FEE)}
                </span>
              </div>
              <div style={styles.divider} />
              <div style={{ ...styles.totalRow, fontWeight: 700, fontSize: 17, color: "#1a4d2e" }}>
                <span>Total</span><span>{formatKES(total)}</span>
              </div>
            </div>
            <div style={styles.mpesaBadge}>
              <span style={{ fontSize: 20 }}>📲</span>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>M-Pesa Payment</div>
                <div style={{ fontSize: 12, opacity: 0.8 }}>STK Push to your phone</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // CART PAGE
  return (
    <div style={styles.page}>
      <header style={styles.header}>
        <div style={styles.brand}>🌾 AgroNandi Inputs</div>
        <div style={styles.cartBadge}>{cart.reduce((s, i) => s + i.qty, 0)} items</div>
      </header>

      <h1 style={styles.pageTitle}>Your Cart</h1>

      {cart.length === 0 ? (
        <div style={styles.emptyCart}>
          <div style={{ fontSize: 48 }}>🛒</div>
          <p>Your cart is empty. Add some farm inputs to get started.</p>
        </div>
      ) : (
        <>
          <div style={styles.cartTable}>
            <div style={styles.cartHeader}>
              <span style={{ flex: 3 }}>Product</span>
              <span style={{ flex: 1, textAlign: "center" }}>Unit Price</span>
              <span style={{ flex: 1.5, textAlign: "center" }}>Quantity</span>
              <span style={{ flex: 1, textAlign: "right" }}>Total</span>
              <span style={{ width: 36 }} />
            </div>

            {cart.map((item, idx) => (
              <div key={item.id} style={{ ...styles.cartRow, ...(idx % 2 === 0 ? styles.cartRowAlt : {}) }}>
                <div style={{ flex: 3, display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={styles.itemIcon}>{item.emoji}</div>
                  <div>
                    <div style={styles.itemName}>{item.name}</div>
                    <div style={styles.itemVariant}>{item.variant}</div>
                  </div>
                </div>
                <div style={{ flex: 1, textAlign: "center", fontSize: 14, color: "var(--color-text-secondary)" }}>
                  {formatKES(item.price)}
                </div>
                <div style={{ flex: 1.5, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
                  <button style={styles.qtyBtn} onClick={() => updateQty(item.id, -1)}>−</button>
                  <span style={styles.qtyNum}>{item.qty}</span>
                  <button style={styles.qtyBtn} onClick={() => updateQty(item.id, 1)}>+</button>
                </div>
                <div style={{ flex: 1, textAlign: "right", fontWeight: 600, fontSize: 14, color: "#1a4d2e" }}>
                  {formatKES(item.price * item.qty)}
                </div>
                <button style={styles.removeBtn} onClick={() => removeItem(item.id)} title="Remove">✕</button>
              </div>
            ))}
          </div>

          <div style={styles.cartFooter}>
            <div style={styles.totalsBox}>
              <div style={styles.totalRow}>
                <span style={{ color: "var(--color-text-secondary)" }}>Subtotal ({cart.reduce((s, i) => s + i.qty, 0)} items)</span>
                <span style={{ fontWeight: 600 }}>{formatKES(subtotal)}</span>
              </div>
              <div style={styles.totalRow}>
                <span style={{ color: "var(--color-text-secondary)", fontSize: 13 }}>Delivery calculated at checkout</span>
                <span style={{ color: "#1a4d2e", fontSize: 13, fontWeight: 500 }}>— —</span>
              </div>
              <div style={styles.divider} />
              <div style={{ ...styles.totalRow, fontSize: 20, fontWeight: 700, color: "#1a4d2e" }}>
                <span>Estimated Total</span>
                <span>{formatKES(subtotal)}</span>
              </div>
            </div>
            <button style={styles.checkoutBtn} onClick={() => setPage("checkout")}>
              Proceed to Checkout →
            </button>
            <p style={{ textAlign: "center", fontSize: 12, color: "var(--color-text-secondary)", marginTop: 8 }}>
              💚 Secure M-Pesa payment at checkout
            </p>
          </div>
        </>
      )}
    </div>
  );
}

const styles = {
  page: {
    fontFamily: "'Georgia', 'Times New Roman', serif",
    maxWidth: 960,
    margin: "0 auto",
    padding: "0 1rem 3rem",
    color: "var(--color-text-primary)",
  },
  header: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "1.25rem 0 1rem",
    borderBottom: "2px solid #1a4d2e",
    marginBottom: "1.5rem",
  },
  brand: {
    fontSize: 20,
    fontWeight: 700,
    color: "#1a4d2e",
    letterSpacing: "-0.3px",
  },
  cartBadge: {
    background: "#1a4d2e",
    color: "#fff",
    fontSize: 12,
    padding: "4px 12px",
    borderRadius: 20,
    fontFamily: "system-ui, sans-serif",
  },
  backLink: {
    background: "none",
    border: "none",
    cursor: "pointer",
    fontSize: 14,
    color: "#1a4d2e",
    fontFamily: "system-ui, sans-serif",
    padding: 0,
  },
  pageTitle: {
    fontSize: 28,
    fontWeight: 700,
    color: "#1a4d2e",
    marginBottom: "1.5rem",
    letterSpacing: "-0.5px",
  },
  cartTable: {
    border: "1.5px solid #d4e6d0",
    borderRadius: 12,
    overflow: "hidden",
    marginBottom: "1.5rem",
  },
  cartHeader: {
    display: "flex",
    alignItems: "center",
    gap: 12,
    background: "#1a4d2e",
    color: "#fff",
    padding: "12px 16px",
    fontSize: 12,
    fontFamily: "system-ui, sans-serif",
    fontWeight: 600,
    textTransform: "uppercase",
    letterSpacing: "0.5px",
  },
  cartRow: {
    display: "flex",
    alignItems: "center",
    gap: 12,
    padding: "14px 16px",
    background: "var(--color-background-primary)",
    borderBottom: "1px solid #e8f2e5",
    transition: "background 0.15s",
  },
  cartRowAlt: {
    background: "#f7fbf5",
  },
  itemIcon: {
    width: 42,
    height: 42,
    background: "#e8f5e2",
    borderRadius: 8,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: 20,
    flexShrink: 0,
  },
  itemName: {
    fontWeight: 600,
    fontSize: 14,
    color: "#1a4d2e",
  },
  itemVariant: {
    fontSize: 12,
    color: "var(--color-text-secondary)",
    marginTop: 2,
    fontFamily: "system-ui, sans-serif",
  },
  qtyBtn: {
    width: 30,
    height: 30,
    border: "1.5px solid #1a4d2e",
    background: "none",
    borderRadius: 6,
    cursor: "pointer",
    fontSize: 16,
    color: "#1a4d2e",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontFamily: "system-ui, sans-serif",
    lineHeight: 1,
    padding: 0,
  },
  qtyNum: {
    width: 28,
    textAlign: "center",
    fontWeight: 700,
    fontSize: 15,
    fontFamily: "system-ui, sans-serif",
    color: "#1a4d2e",
  },
  removeBtn: {
    width: 28,
    height: 28,
    background: "none",
    border: "1px solid #e8b4b4",
    color: "#c0392b",
    borderRadius: 6,
    cursor: "pointer",
    fontSize: 12,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
  },
  cartFooter: {
    maxWidth: 420,
    marginLeft: "auto",
  },
  totalsBox: {
    background: "#f0f8ec",
    border: "1.5px solid #d4e6d0",
    borderRadius: 12,
    padding: "1rem 1.25rem",
    marginBottom: "1rem",
    fontFamily: "system-ui, sans-serif",
  },
  totalRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "5px 0",
    fontSize: 15,
  },
  divider: {
    borderTop: "1px solid #d4e6d0",
    margin: "10px 0",
  },
  checkoutBtn: {
    width: "100%",
    background: "#1a4d2e",
    color: "#fff",
    border: "none",
    borderRadius: 10,
    padding: "14px 0",
    fontSize: 16,
    fontWeight: 600,
    cursor: "pointer",
    fontFamily: "system-ui, sans-serif",
    letterSpacing: "0.2px",
  },
  emptyCart: {
    textAlign: "center",
    padding: "4rem 2rem",
    color: "var(--color-text-secondary)",
    fontSize: 16,
    fontFamily: "system-ui, sans-serif",
  },
  // CHECKOUT
  checkoutGrid: {
    display: "grid",
    gridTemplateColumns: "1fr minmax(0, 360px)",
    gap: "1.5rem",
    alignItems: "start",
  },
  formCard: {
    background: "var(--color-background-primary)",
    border: "1.5px solid #d4e6d0",
    borderRadius: 14,
    padding: "1.5rem",
  },
  summaryCard: {
    background: "#f0f8ec",
    border: "1.5px solid #d4e6d0",
    borderRadius: 14,
    padding: "1.5rem",
    position: "sticky",
    top: 16,
  },
  sectionTitle: {
    fontSize: 17,
    fontWeight: 700,
    color: "#1a4d2e",
    marginBottom: "1.25rem",
    paddingBottom: "0.75rem",
    borderBottom: "2px solid #e8f2e5",
  },
  field: {
    marginBottom: "1.1rem",
  },
  label: {
    display: "block",
    fontSize: 13,
    fontWeight: 600,
    color: "#1a4d2e",
    marginBottom: 6,
    fontFamily: "system-ui, sans-serif",
    letterSpacing: "0.2px",
  },
  req: { color: "#c0392b" },
  optional: { color: "var(--color-text-secondary)", fontWeight: 400 },
  input: {
    width: "100%",
    border: "1.5px solid #c5ddbf",
    borderRadius: 8,
    padding: "10px 12px",
    fontSize: 14,
    fontFamily: "system-ui, sans-serif",
    color: "var(--color-text-primary)",
    boxSizing: "border-box",
    outline: "none",
    transition: "border-color 0.2s",
  },
  inputErr: {
    borderColor: "#c0392b",
    background: "#fff8f8",
  },
  errMsg: {
    color: "#c0392b",
    fontSize: 12,
    marginTop: 4,
    fontFamily: "system-ui, sans-serif",
  },
  hint: {
    color: "var(--color-text-secondary)",
    fontSize: 11,
    marginTop: 4,
    fontFamily: "system-ui, sans-serif",
  },
  deliveryRow: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 10,
  },
  deliveryBtn: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "12px 14px",
    border: "1.5px solid #c5ddbf",
    borderRadius: 10,
    background: "none",
    cursor: "pointer",
    textAlign: "left",
    color: "var(--color-text-primary)",
    fontFamily: "system-ui, sans-serif",
    transition: "all 0.15s",
  },
  deliveryBtnActive: {
    border: "2px solid #1a4d2e",
    background: "#e8f5e2",
  },
  submitBtn: {
    width: "100%",
    background: "#1a4d2e",
    color: "#fff",
    border: "none",
    borderRadius: 10,
    padding: "15px 0",
    fontSize: 16,
    fontWeight: 700,
    cursor: "pointer",
    fontFamily: "system-ui, sans-serif",
    marginTop: "0.5rem",
    letterSpacing: "0.2px",
  },
  mpesaNote: {
    textAlign: "center",
    fontSize: 12,
    color: "var(--color-text-secondary)",
    marginTop: 8,
    fontFamily: "system-ui, sans-serif",
  },
  summaryItems: {
    display: "flex",
    flexDirection: "column",
    gap: 12,
    marginBottom: "1rem",
  },
  summaryItem: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    fontFamily: "system-ui, sans-serif",
  },
  summaryEmoji: {
    fontSize: 22,
    width: 36,
    height: 36,
    background: "#fff",
    borderRadius: 8,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    border: "1px solid #d4e6d0",
  },
  summaryName: {
    fontSize: 13,
    fontWeight: 600,
    color: "#1a4d2e",
  },
  summaryVariant: {
    fontSize: 12,
    color: "var(--color-text-secondary)",
  },
  summaryPrice: {
    fontSize: 13,
    fontWeight: 600,
    color: "var(--color-text-primary)",
    whiteSpace: "nowrap",
  },
  totalRows: {
    fontFamily: "system-ui, sans-serif",
  },
  mpesaBadge: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    background: "#d4f5d4",
    border: "1px solid #8ed88e",
    borderRadius: 10,
    padding: "10px 14px",
    marginTop: "1rem",
    fontFamily: "system-ui, sans-serif",
    color: "#155a15",
  },
  // SUCCESS
  successCard: {
    maxWidth: 440,
    margin: "4rem auto",
    background: "var(--color-background-primary)",
    border: "2px solid #1a4d2e",
    borderRadius: 16,
    padding: "2.5rem 2rem",
    textAlign: "center",
    fontFamily: "system-ui, sans-serif",
  },
  successIcon: {
    width: 64,
    height: 64,
    background: "#1a4d2e",
    color: "#fff",
    borderRadius: "50%",
    fontSize: 30,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    margin: "0 auto 1rem",
  },
  successTitle: {
    fontSize: 24,
    color: "#1a4d2e",
    fontWeight: 700,
    marginBottom: "0.5rem",
    fontFamily: "Georgia, serif",
  },
  successSub: {
    color: "var(--color-text-secondary)",
    fontSize: 14,
    lineHeight: 1.6,
    marginBottom: "1.5rem",
  },
  successDetails: {
    background: "#f0f8ec",
    borderRadius: 10,
    padding: "1rem",
    marginBottom: "1.5rem",
    textAlign: "left",
  },
  successRow: {
    display: "flex",
    justifyContent: "space-between",
    fontSize: 14,
    padding: "4px 0",
    color: "var(--color-text-secondary)",
  },
  backBtn: {
    width: "100%",
    background: "#1a4d2e",
    color: "#fff",
    border: "none",
    borderRadius: 10,
    padding: "13px 0",
    fontSize: 15,
    fontWeight: 600,
    cursor: "pointer",
  },
};