"use client";

import Link from "next/link";
import { useState, useEffect, useCallback } from "react";
import { RequireAuth } from "@/components/RequireAuth";
import { useAuth } from "@/context/AuthContext";
import { guestPlaceLaundry } from "@/lib/guest-hotel-api";
import { formatEtb } from "@/lib/format-etb";
import { useGuestActiveBooking } from "@/lib/useGuestActiveBooking";
import { laundryItems, type LaundryCartItem, SAME_DAY_SURCHARGE } from "@/lib/data/laundryCatalog";

export function LaundryClient() {
  return (
    <RequireAuth redirectTo="/guest/login">
      <LaundryInner />
    </RequireAuth>
  );
}

function LaundryInner() {
  const { accessToken } = useAuth();
  const { bookingId, loading: bookingLoading, propertyId } = useGuestActiveBooking();

  // Form states
  const [cart, setCart] = useState<Record<string, number>>({});
  const [sameDay, setSameDay] = useState(false);
  const [pickupAt, setPickupAt] = useState("");
  const [deliverAt, setDeliverAt] = useState("");
  const [notes, setNotes] = useState("");
  const [sent, setSent] = useState(false);
  const [submitErr, setSubmitErr] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  const canUseApi = !!(propertyId && accessToken && bookingId);

  // Compute total
  const total = useCallback(() => {
    let sum = 0;
    for (const [label, qty] of Object.entries(cart)) {
      if (qty > 0) {
        const price = laundryItems.find(item => item.label.toLowerCase() === label.toLowerCase())?.price || 0;
        sum += price * qty;
      }
    }
    if (sameDay) sum += SAME_DAY_SURCHARGE;
    return sum;
  }, [cart, sameDay]);

  const [displayTotal, setDisplayTotal] = useState(0);
  useEffect(() => {
    setDisplayTotal(total());
  }, [total]);

  // Build items Json
  const buildItems = (): LaundryCartItem[] => 
    Object.entries(cart)
      .filter(([, qty]) => qty > 0)
      .map(([label, quantity]) => ({ label: laundryItems.find(i => i.label.toLowerCase() === label.toLowerCase())?.label || label, quantity }));

  async function submit() {
    if (!canUseApi || buildItems().length === 0) {
      setSubmitErr("Please select at least one item.");
      return;
    }
    setSubmitErr(null);
    setSubmitting(true);
    try {
      await guestPlaceLaundry(propertyId!, accessToken!, {
        bookingId: bookingId!,
        items: buildItems(),
        sameDay,
        total: displayTotal,
        // currency: "ETB",
        notes: notes.trim() || undefined,
        pickupAt: pickupAt || undefined,
        deliverAt: deliverAt || undefined,
      });
      setSubmitting(false);
      setCart({});
      setSameDay(false);
      setPickupAt("");
      setDeliverAt("");
      setNotes("");
      setSent(true);
    } catch (e) {
      setSubmitErr(e instanceof Error ? e.message : "Could not submit laundry request");
      setSubmitting(false);
    }
  }

  const needBooking = !bookingLoading && !bookingId;
  const hasItems = buildItems().length > 0;

  const updateQty = (label: string, delta: number) => {
    setCart(prev => {
      const current = prev[label] || 0;
      const newQty = Math.max(0, current + delta);
      const newCart = { ...prev };
      if (newQty === 0) delete newCart[label];
      else newCart[label] = newQty;
      return newCart;
    });
  };

  return (
    <div className="bg-[var(--color-bg)] pb-24 pt-8 md:pt-12">
      <div className="mx-auto max-w-7xl px-4 md:px-8">
        <nav className="text-xs font-medium text-[var(--color-muted)]">
          <Link href="/" className="hover:text-[var(--color-accent)]">Home</Link>
          <span className="mx-2 opacity-50">/</span>
          <Link href="/guest" className="hover:text-[var(--color-accent)]">Guest hub</Link>
          <span className="mx-2 opacity-50">/</span>
          <span className="text-[var(--color-text)]">Laundry</span>
        </nav>

        <div className="mt-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <h1 className="font-heading text-3xl font-semibold text-[var(--color-text)] md:text-4xl">Laundry service</h1>
            <p className="mt-2 max-w-xl text-sm text-[var(--color-muted)]">Submit a laundry request attached to your active booking.</p>
          </div>
          <Link href="/guest/profile" className="text-sm font-semibold text-[var(--color-accent)] hover:underline">
            View profile →
          </Link>
        </div>

        {needBooking ? (
          <div className="mt-6 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
            Sign in with a booking code or use a reservation to sync laundry with the hotel.
          </div>
        ) : null}

        {submitErr ? (
          <div className="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900">{submitErr}</div>
        ) : null}

        {sent ? (
          <div className="mt-6 rounded-2xl border border-[var(--color-accent)]/40 bg-[var(--color-accent-soft)] px-4 py-3 text-sm text-[var(--color-primary)]">
            Laundry request submitted successfully.
          </div>
        ) : null}

        {!sent && (
          <div className="mt-10 grid gap-10 lg:grid-cols-[1fr_380px]">
            {/* Items Selection */}
            <div className="space-y-6 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-sm">
              <label className="text-base font-semibold text-[var(--color-text)] block mb-2">Select items</label>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {laundryItems.map((item) => {
                  const qty = cart[item.label.toLowerCase()] || 0;
                  return (
                    <div key={item.label} className="border border-[var(--color-border)] rounded-xl p-4 bg-[var(--color-surface-muted)]">
                      <div className="font-medium text-[var(--color-text)] mb-1">{item.label}</div>
                      <div className="text-sm text-[var(--color-muted)] mb-3">{formatEtb(item.price)} / each</div>
                      <div className="flex items-center gap-2">
                        <button 
                          type="button"
                          onClick={() => updateQty(item.label.toLowerCase(), -1)}
                          disabled={qty === 0}
                          className="w-10 h-10 rounded-lg border bg-[var(--color-surface)] text-[var(--color-text)] hover:bg-[var(--color-accent-soft)] disabled:opacity-50 flex items-center justify-center"
                        >
                          −
                        </button>
                        <span className="w-16 text-center font-mono text-lg font-semibold">{qty}</span>
                        <button 
                          type="button"
                          onClick={() => updateQty(item.label.toLowerCase(), 1)}
                          className="w-10 h-10 rounded-lg border bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-dark)] flex items-center justify-center"
                        >
                          +
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Summary & Form */}
            <div className="space-y-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-sm">
              <div className="text-xl font-bold text-[var(--color-text)]">
                {formatEtb(displayTotal)} {sameDay && <span className="text-sm text-[var(--color-accent)]">(incl. same-day)</span>}
              </div>

              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={sameDay}
                  onChange={(e) => setSameDay(e.target.checked)}
                  className="w-4 h-4 rounded"
                />
                <span className="text-sm font-medium text-[var(--color-text)]">Express same-day (+{formatEtb(SAME_DAY_SURCHARGE)})</span>
              </label>

              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                  <label className="block text-xs font-medium uppercase tracking-wide text-[var(--color-muted)] mb-1">Pickup</label>
                  <input
                    type="datetime-local"
                    value={pickupAt}
                    onChange={(e) => setPickupAt(e.target.value)}
                    className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label className="block text-xs font-medium uppercase tracking-wide text-[var(--color-muted)] mb-1">Delivery</label>
                  <input
                    type="datetime-local"
                    value={deliverAt}
                    onChange={(e) => setDeliverAt(e.target.value)}
                    className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3 py-2 text-sm"
                  />
                </div>
              </div>

              <textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                rows={3}
                placeholder="Special instructions (e.g., no starch, delicate)..."
                className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3 py-2 text-sm"
              />

              <button
                onClick={submit}
                disabled={submitting || !hasItems || !canUseApi}
                className="w-full rounded-xl bg-[var(--color-accent)] px-6 py-3 text-base font-semibold text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                {submitting ? "Submitting..." : `Place laundry order (${formatEtb(displayTotal)})`}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}