"use client";

import { useState, useEffect } from "react";
import { useCart } from "@/lib/cartStore";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import Navbar from "@/components/Navbar";
import { ArrowRight, Phone, ChatCircle, Package, Minus, Plus, Trash, CreditCard, Check, UploadSimple, Truck } from "@phosphor-icons/react";
import LocationPicker, { type PickedLocation } from "@/components/LocationPicker";
import { useLanguage } from "@/lib/i18n/context";
import Footer from "@/components/Footer";

function ZoomThumb({
  src, alt,
  onMove, onEnter, onLeave,
}: {
  src: string; alt: string;
  onMove:  (localX: number, localY: number, clientX: number, clientY: number) => void;
  onEnter: (src: string) => void;
  onLeave: () => void;
}) {
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    onMove(
      ((e.clientX - rect.left) / rect.width)  * 100,
      ((e.clientY - rect.top)  / rect.height) * 100,
      e.clientX,
      e.clientY,
    );
  };

  return (
    <div
      className="w-16 h-16 rounded-xl bg-brand-sand-light flex-shrink-0 relative overflow-hidden cursor-crosshair hover:ring-2 hover:ring-brand-dark/20 transition-all"
      onMouseEnter={() => onEnter(src)}
      onMouseLeave={onLeave}
      onMouseMove={handleMouseMove}
    >
      <Image src={src} alt={alt} fill className="object-contain p-1.5" />
    </div>
  );
}

// STEPS defined inside component from translations

interface PaymentMethod {
  id: string;
  name: string;
  number: string;
  enabled: boolean;
}


export default function CommanderPage() {
  const { t } = useLanguage();
  const STEPS = t.commander.steps;
  const { items, total, clearCart, updateQty, removeItem } = useCart();
  const router = useRouter();
  const [form,      setForm]      = useState({ phone: "", notes: "" });
  const [location,  setLocation]  = useState<PickedLocation | null>(null);
  const [error,     setError]     = useState("");
  const [loading,   setLoading]   = useState(false);
  const [zoomSrc,    setZoomSrc]    = useState<string | null>(null);
  const [zoomLocal,  setZoomLocal]  = useState({ x: 50, y: 50 });
  const [zoomCursor, setZoomCursor] = useState({ x: 0, y: 0 });

  // Payment
  const [paymentMethods,   setPaymentMethods]   = useState<PaymentMethod[]>([]);
  const [selectedPayment,  setSelectedPayment]  = useState("");
  const [screenshotFile,   setScreenshotFile]   = useState<File | null>(null);
  const [screenshotUrl,    setScreenshotUrl]    = useState("");
  const [screenshotPreview,setScreenshotPreview]= useState("");
  const [uploadingScreenshot, setUploadingScreenshot] = useState(false);
  const [uploadError,      setUploadError]      = useState("");

  useEffect(() => {
    fetch("/api/customer/me")
      .then(r => r.json())
      .then(data => { if (!data?.userId) router.replace("/login"); })
      .catch(() => router.replace("/login"));
  }, [router]);

  useEffect(() => {
    fetch("/api/config/payment-methods")
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data) && data.length > 0) {
          setPaymentMethods(data);
          setSelectedPayment(data[0].id);
        }
      })
      .catch(() => {});
  }, []);

  const allPaymentMethods = paymentMethods;

  const selectedMethod = allPaymentMethods.find(m => m.id === selectedPayment);
  const isMobileMoney  = !!selectedMethod;

  const handleScreenshotChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setScreenshotFile(file);
    setScreenshotPreview(URL.createObjectURL(file));
    setScreenshotUrl("");
    setUploadError("");
    setUploadingScreenshot(true);
    try {
      const fd = new FormData();
      fd.append("file", file);
      const res  = await fetch("/api/upload/payment-screenshot", { method: "POST", body: fd });
      const data = await res.json();
      if (!res.ok || !data.url) {
        setUploadError(t.commander.uploadFailed);
        setScreenshotFile(null);
        setScreenshotPreview("");
      } else {
        setScreenshotUrl(data.url);
      }
    } catch {
      setUploadError(t.commander.uploadFailed);
      setScreenshotFile(null);
      setScreenshotPreview("");
    } finally {
      setUploadingScreenshot(false);
    }
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    if (!selectedPayment) {
      setError(t.commander.errPayment);
      return;
    }
    if (!location?.address) {
      setError(t.commander.errLocation);
      return;
    }
    if (!screenshotUrl) {
      setError(t.commander.errReceipt);
      return;
    }

    setLoading(true);
    try {
      const res  = await fetch("/api/orders", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify({
          items,
          total: total(),
          ...form,
          address:            location.address,
          delivery_lat:       location.lat,
          delivery_lng:       location.lng,
          payment_method:     selectedPayment,
          payment_screenshot: screenshotUrl,
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        if (res.status === 401) { router.push("/login"); return; }
        setError(data.error);
        return;
      }
      clearCart();
      router.push("/suivi-commandes");
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Navbar />

      <main className="min-h-screen bg-brand-sand-light pt-20 px-4 pb-8">

        {/* Step breadcrumb */}
        <div className="max-w-5xl mx-auto pt-5 pb-2 flex items-center justify-between gap-3">
          <div className="flex items-center gap-1 sm:gap-2">
            {STEPS.map((step, i) => (
              <div key={step} className="flex items-center gap-1 sm:gap-2">
                <div className={`flex items-center gap-1 sm:gap-1.5 ${i < 1 ? "opacity-40" : i === 1 ? "opacity-100" : "opacity-25"}`}>
                  <div className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center text-[9px] sm:text-[10px] font-bold flex-shrink-0 ${
                    i === 1 ? "bg-brand-dark text-brand-off-white" : "bg-brand-dark/20 text-brand-dark"
                  }`}>
                    {i + 1}
                  </div>
                  <span className={`text-[10px] sm:text-xs font-bold tracking-wide ${i === 1 ? "text-brand-dark" : "text-brand-dark/50"}`}>
                    {step}
                  </span>
                </div>
                {i < STEPS.length - 1 && (
                  <div className="w-4 sm:w-8 h-px bg-brand-dark/20" />
                )}
              </div>
            ))}
          </div>
          <Link href="/produits" className="hidden sm:block text-brand-dark/40 text-xs font-semibold hover:text-brand-dark transition-colors flex-shrink-0">
            {t.commander.backToProducts}
          </Link>
        </div>

        {items.length === 0 ? (
          <div className="max-w-sm mx-auto text-center space-y-4 py-24">
            <Package size={48} weight="light" className="text-brand-dark/15 mx-auto" />
            <p className="text-brand-dark/40 text-sm">{t.commander.emptyCart}</p>
            <Link href="/produits" className="inline-flex items-center gap-2 bg-brand-dark text-brand-off-white font-semibold px-6 py-3 rounded-full text-sm hover:bg-brand-dark/90 transition-colors">
              {t.commander.viewProducts} <ArrowRight size={14} />
            </Link>
          </div>
        ) : (
          <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">

            {/* ── Left: Order summary ── */}
            <div className="lg:sticky lg:top-28 space-y-4">
              <h2 className="text-brand-dark font-bold text-lg" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                {t.commander.summary}
              </h2>


              {/* Items */}
              <div className="bg-white border border-brand-dark/10 rounded-2xl overflow-hidden shadow-sm">
                {items.map((item, i) => {
                  const isGros    = !!(item.price_gros && item.price_gros > 0 && item.min_qty_gros && item.min_qty_gros > 1 && item.quantity >= item.min_qty_gros);
                  const unitPrice = isGros ? item.price_gros! : item.price;
                  return (
                  <div
                    key={`${item.id}-${item.size}`}
                    className={`flex items-center gap-4 p-4 ${i < items.length - 1 ? "border-b border-brand-dark/8" : ""}`}
                  >
                    {/* Image with zoom */}
                    {item.image_url
                      ? <ZoomThumb
                          src={item.image_url}
                          alt={item.name}
                          onEnter={src => setZoomSrc(src)}
                          onLeave={() => setZoomSrc(null)}
                          onMove={(lx, ly, cx, cy) => {
                            setZoomLocal({ x: lx, y: ly });
                            setZoomCursor({ x: cx, y: cy });
                          }}
                        />
                      : <div className="w-16 h-16 rounded-xl bg-brand-sand-light flex-shrink-0 flex items-center justify-center text-brand-dark/20"><Package size={20} /></div>
                    }

                    {/* Info */}
                    <div className="flex-1 min-w-0">
                      <p className="text-brand-dark text-sm font-semibold truncate">{item.name}</p>
                      {item.size && <p className="text-brand-dark/40 text-xs mt-0.5">{item.size}</p>}

                      {/* Qty stepper */}
                      <div className="flex items-center gap-1.5 mt-2">
                        <button
                          onClick={() => updateQty(item.id, item.quantity - 1, item.size)}
                          className="w-6 h-6 rounded-full border border-brand-dark/15 flex items-center justify-center text-brand-dark/50 hover:border-brand-dark/40 hover:text-brand-dark transition-colors"
                        >
                          <Minus size={9} />
                        </button>
                        <span className="text-brand-dark text-xs font-bold w-5 text-center">{item.quantity}</span>
                        <button
                          onClick={() => updateQty(item.id, item.quantity + 1, item.size)}
                          className="w-6 h-6 rounded-full border border-brand-dark/15 flex items-center justify-center text-brand-dark/50 hover:border-brand-dark/40 hover:text-brand-dark transition-colors"
                        >
                          <Plus size={9} />
                        </button>
                        <button
                          onClick={() => removeItem(item.id, item.size)}
                          className="w-6 h-6 rounded-full flex items-center justify-center text-brand-dark/25 hover:text-red-500 transition-colors ml-1"
                        >
                          <Trash size={11} />
                        </button>
                      </div>
                    </div>

                    {/* Price */}
                    <div className="text-right flex-shrink-0">
                      {isGros && (
                        <span className="inline-block bg-brand-yellow text-brand-dark text-[9px] font-bold px-2 py-0.5 rounded-full mb-1">
                          Prix gros ✓
                        </span>
                      )}
                      <p className="text-brand-dark font-bold text-sm">
                        {(unitPrice * item.quantity).toLocaleString("fr-MR")} MRU
                      </p>
                      {isGros && (
                        <p className="text-brand-dark/35 text-[10px] line-through">
                          {(item.price * item.quantity).toLocaleString("fr-MR")} MRU
                        </p>
                      )}
                      {!isGros && item.quantity > 1 && (
                        <p className="text-brand-dark/35 text-[10px]">
                          {unitPrice.toLocaleString("fr-MR")} × {item.quantity}
                        </p>
                      )}
                    </div>
                  </div>
                  );
                })}

                {/* Total */}
                <div className="px-4 py-4 bg-brand-sand-light border-t border-brand-dark/10 flex items-center justify-between">
                  <span className="text-brand-dark/50 text-sm font-medium">{t.commander.total}</span>
                  <span className="text-brand-dark font-bold text-xl" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                    {total().toLocaleString("fr-MR")} <span className="text-sm font-semibold">MRU</span>
                  </span>
                </div>
              </div>
            </div>

            {/* ── Right: Form ── */}
            <div className="space-y-4">
              <h2 className="text-brand-dark font-bold text-lg" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                {t.commander.deliveryInfo}
              </h2>

              <form onSubmit={submit} className="bg-white border border-brand-dark/10 rounded-2xl p-6 space-y-5 shadow-sm">

                <div>
                  <label className="flex items-center gap-1.5 text-brand-dark text-xs font-bold uppercase tracking-wider mb-2">
                    <Phone size={11} weight="bold" /> {t.commander.phone} *
                  </label>
                  <input
                    type="tel"
                    required
                    value={form.phone}
                    onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
                    className="w-full bg-brand-sand-light border border-brand-dark/20 rounded-xl px-4 py-3 text-brand-dark text-sm placeholder:text-brand-dark/40 focus:outline-none focus:border-brand-dark/50 focus:bg-white transition-all"
                    placeholder="+222 XX XX XX XX"
                  />
                </div>

                <div>
                  <label className="flex items-center gap-1.5 text-brand-dark text-xs font-bold uppercase tracking-wider mb-2">
                    {t.commander.deliveryLocation} *
                  </label>
                  <LocationPicker value={location} onChange={setLocation} />
                </div>

                <div className="flex items-start gap-2.5 bg-brand-peach/40 border border-brand-peach rounded-xl px-4 py-3">
                  <Truck size={16} weight="bold" className="text-brand-dark/60 flex-shrink-0 mt-0.5" />
                  <p className="text-brand-dark/70 text-xs leading-relaxed">{t.commander.deliveryNotice}</p>
                </div>

                <div>
                  <label className="flex items-center gap-1.5 text-brand-dark text-xs font-bold uppercase tracking-wider mb-2">
                    <ChatCircle size={11} weight="bold" /> {t.commander.notes}
                    <span className="text-brand-dark/40 font-normal normal-case tracking-normal ml-1">{t.commander.optional}</span>
                  </label>
                  <textarea
                    rows={2}
                    value={form.notes}
                    onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
                    className="w-full bg-brand-sand-light border border-brand-dark/20 rounded-xl px-4 py-3 text-brand-dark text-sm placeholder:text-brand-dark/40 focus:outline-none focus:border-brand-dark/50 focus:bg-white transition-all resize-none"
                    placeholder={t.commander.notesPlaceholder}
                  />
                </div>

                {/* ── Payment method ── */}
                <div>
                  <label className="flex items-center gap-1.5 text-brand-dark text-xs font-bold uppercase tracking-wider mb-3">
                    <CreditCard size={11} weight="bold" /> {t.commander.paymentMethod} *
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {allPaymentMethods.map(method => (
                      <button
                        key={method.id}
                        type="button"
                        onClick={() => {
                          setSelectedPayment(method.id);
                          setScreenshotFile(null);
                          setScreenshotUrl("");
                          setScreenshotPreview("");
                          setUploadError("");
                        }}
                        className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border text-sm font-semibold transition-all ${
                          selectedPayment === method.id
                            ? "bg-brand-yellow border-brand-yellow text-brand-dark shadow-sm"
                            : "bg-brand-sand-light border-brand-dark/15 text-brand-dark/60 hover:border-brand-dark/30 hover:text-brand-dark"
                        }`}
                      >
                        {selectedPayment === method.id && <Check size={13} weight="bold" />}
                        {method.name}
                      </button>
                    ))}
                  </div>
                </div>

                {/* ── Mobile money info + screenshot ── */}
                {isMobileMoney && selectedMethod.number && (
                  <div className="bg-brand-yellow/15 border border-brand-yellow/40 rounded-xl px-4 py-3 space-y-3">
                    <p className="text-brand-dark text-sm font-medium">
                      {t.commander.sendTo}{" "}
                      <span className="font-bold">{total().toLocaleString("fr-MR")} MRU</span>
                      {" "}{t.commander.toNumber}{" "}
                      <span className="font-bold tracking-wider">{selectedMethod.number}</span>
                    </p>

                    {/* Screenshot upload */}
                    <div>
                      <p className="text-brand-dark/60 text-xs font-semibold mb-2">
                        {t.commander.attachReceipt}
                      </p>
                      {screenshotPreview ? (
                        <div className="flex items-center gap-3">
                          <div className="relative w-16 h-16 rounded-xl overflow-hidden border border-brand-dark/15 flex-shrink-0">
                            <Image src={screenshotPreview} alt="reçu" fill className="object-cover" />
                          </div>
                          <div className="flex-1 min-w-0">
                            {uploadingScreenshot ? (
                              <div className="flex items-center gap-1.5 text-brand-dark/50 text-xs">
                                <span className="w-3.5 h-3.5 border-2 border-brand-dark/20 border-t-brand-dark rounded-full animate-spin flex-shrink-0" />
                                {t.commander.uploading}
                              </div>
                            ) : screenshotUrl ? (
                              <div className="flex items-center gap-1.5 text-green-700 text-xs font-semibold">
                                <Check size={13} weight="bold" />
                                {t.commander.uploaded}
                              </div>
                            ) : uploadError ? (
                              <p className="text-red-600 text-xs">{uploadError}</p>
                            ) : null}
                          </div>
                          <label className="flex-shrink-0 text-xs font-semibold text-brand-dark/50 hover:text-brand-dark cursor-pointer transition-colors underline underline-offset-2">
                            {t.commander.change}
                            <input type="file" accept="image/*" className="hidden" onChange={handleScreenshotChange} />
                          </label>
                        </div>
                      ) : (
                        <label className="flex items-center gap-2 w-full bg-white border border-dashed border-brand-dark/20 rounded-xl px-4 py-3 cursor-pointer hover:border-brand-dark/40 transition-colors">
                          <UploadSimple size={16} className="text-brand-dark/40 flex-shrink-0" />
                          <span className="text-brand-dark/50 text-xs font-medium">
                            {uploadingScreenshot ? t.commander.uploading : t.commander.chooseFile}
                          </span>
                          <input type="file" accept="image/*" className="hidden" onChange={handleScreenshotChange} disabled={uploadingScreenshot} />
                        </label>
                      )}
                      {uploadError && !screenshotPreview && (
                        <p className="text-red-600 text-xs mt-1">{uploadError}</p>
                      )}
                    </div>
                  </div>
                )}

                {isMobileMoney && !selectedMethod.number && (
                  <div className="bg-brand-yellow/15 border border-brand-yellow/40 rounded-xl px-4 py-3 space-y-3">
                    <p className="text-brand-dark text-sm font-medium">
                      {t.commander.sendTo}{" "}
                      <span className="font-bold">{total().toLocaleString("fr-MR")} MRU</span>
                      {" "}{t.commander.via} <span className="font-bold">{selectedMethod.name}</span>
                    </p>
                    {/* Screenshot upload */}
                    <div>
                      <p className="text-brand-dark/60 text-xs font-semibold mb-2">
                        {t.commander.attachReceipt}
                      </p>
                      {screenshotPreview ? (
                        <div className="flex items-center gap-3">
                          <div className="relative w-16 h-16 rounded-xl overflow-hidden border border-brand-dark/15 flex-shrink-0">
                            <Image src={screenshotPreview} alt="reçu" fill className="object-cover" />
                          </div>
                          <div className="flex-1 min-w-0">
                            {uploadingScreenshot ? (
                              <div className="flex items-center gap-1.5 text-brand-dark/50 text-xs">
                                <span className="w-3.5 h-3.5 border-2 border-brand-dark/20 border-t-brand-dark rounded-full animate-spin flex-shrink-0" />
                                {t.commander.uploading}
                              </div>
                            ) : screenshotUrl ? (
                              <div className="flex items-center gap-1.5 text-green-700 text-xs font-semibold">
                                <Check size={13} weight="bold" />
                                {t.commander.uploaded}
                              </div>
                            ) : uploadError ? (
                              <p className="text-red-600 text-xs">{uploadError}</p>
                            ) : null}
                          </div>
                          <label className="flex-shrink-0 text-xs font-semibold text-brand-dark/50 hover:text-brand-dark cursor-pointer transition-colors underline underline-offset-2">
                            {t.commander.change}
                            <input type="file" accept="image/*" className="hidden" onChange={handleScreenshotChange} />
                          </label>
                        </div>
                      ) : (
                        <label className="flex items-center gap-2 w-full bg-white border border-dashed border-brand-dark/20 rounded-xl px-4 py-3 cursor-pointer hover:border-brand-dark/40 transition-colors">
                          <UploadSimple size={16} className="text-brand-dark/40 flex-shrink-0" />
                          <span className="text-brand-dark/50 text-xs font-medium">
                            {uploadingScreenshot ? t.commander.uploading : t.commander.chooseFile}
                          </span>
                          <input type="file" accept="image/*" className="hidden" onChange={handleScreenshotChange} disabled={uploadingScreenshot} />
                        </label>
                      )}
                      {uploadError && !screenshotPreview && (
                        <p className="text-red-600 text-xs mt-1">{uploadError}</p>
                      )}
                    </div>
                  </div>
                )}

                {error && (
                  <p className="text-red-600 text-sm bg-red-50 border border-red-200 rounded-xl px-4 py-3">{error}</p>
                )}

                <button
                  type="submit"
                  disabled={loading || uploadingScreenshot}
                  className="group w-full bg-brand-dark text-brand-off-white font-bold py-4 rounded-xl text-sm tracking-wide hover:bg-brand-dark/90 disabled:opacity-50 transition-all flex items-center justify-center gap-2"
                >
                  {loading ? t.commander.submitting : (
                    <>
                      {t.commander.confirm}
                      <ArrowRight size={14} className="transition-transform duration-300 group-hover:translate-x-1" />
                    </>
                  )}
                </button>
              </form>

            </div>

          </div>
        )}
        {/* Floating zoom overlay — follows cursor, desktop only */}
        {zoomSrc && (
          <div
            className="fixed z-50 w-56 h-56 rounded-2xl overflow-hidden shadow-2xl border border-brand-dark/10 pointer-events-none hidden lg:block"
            style={{
              left:               zoomCursor.x + 24,
              top:                zoomCursor.y - 112,
              backgroundImage:    `url(${zoomSrc})`,
              backgroundSize:     "400%",
              backgroundPosition: `${zoomLocal.x}% ${zoomLocal.y}%`,
              backgroundRepeat:   "no-repeat",
            }}
          />
        )}
      </main>
      <Footer />
    </>
  );
}