'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useCart } from '@/lib/cartStore';
import { loginCustomer } from '@/app/account/actions';
import Price from '@/components/Price';

interface CheckoutPageClientProps {
  isLoggedIn: boolean;
  customer?: any;
}

export default function CheckoutPageClient({ isLoggedIn, customer }: CheckoutPageClientProps) {
  const [mounted, setMounted] = useState(false);
  const [mode, setMode] = useState<'logged-in' | 'login' | 'guest' | null>(isLoggedIn ? 'logged-in' : null);
  const [checkingOut, setCheckingOut] = useState(false);
  const [checkoutError, setCheckoutError] = useState<string | null>(null);
  const [guestData, setGuestData] = useState({
    fullName: '',
    email: '',
    phone: '',
    address: '',
  });

  const items = useCart((s) => s.items);
  const total = useCart((s) => s.total());

  useEffect(() => setMounted(true), []);

  if (!mounted) return null;

  if (items.length === 0) {
    return (
      <div className="mx-auto max-w-md px-6 py-16 text-center">
        <h1 className="font-display text-3xl">Checkout</h1>
        <p className="mt-4 text-sm text-muted">Your bag is empty.</p>
        <Link
          href="/products"
          className="mt-6 inline-block bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
        >
          Continue shopping
        </Link>
      </div>
    );
  }

  const handleGuestCheckout = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!guestData.fullName || !guestData.email || !guestData.phone || !guestData.address) {
      setCheckoutError('Please fill in all fields.');
      return;
    }

    setCheckingOut(true);
    setCheckoutError(null);
    try {
      // Mark that we're checking out so LogoutOnUnload doesn't clear cart
      if (typeof window !== 'undefined') {
        sessionStorage.setItem('isCheckingOut', 'true');
      }

      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items,
          guest: {
            name: guestData.fullName,
            email: guestData.email,
            phone: guestData.phone,
            address: guestData.address,
          },
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.url) {
        if (typeof window !== 'undefined') {
          sessionStorage.removeItem('isCheckingOut');
        }
        throw new Error(data.error ?? 'Something went wrong starting checkout.');
      }
      window.location.href = data.url;
    } catch (err) {
      setCheckoutError(err instanceof Error ? err.message : 'Something went wrong.');
      setCheckingOut(false);
    }
  };

  return (
    <div className="mx-auto max-w-2xl px-6 py-16">
      <h1 className="font-display text-3xl">Checkout</h1>

      <div className="mt-8 grid gap-8 md:grid-cols-2">
        {/* Order summary */}
        <div>
          <h2 className="font-display text-lg">Order summary</h2>
          <div className="mt-4 space-y-3 border-t border-line pt-4">
            {items.map((item) => (
              <div key={item.cartItemId} className="flex justify-between text-sm">
                <div>
                  <p className="font-medium">{item.name}</p>
                  <p className="text-xs text-muted">Qty: {item.quantity}</p>
                </div>
                <Price cents={item.unitPrice * item.quantity} className="font-mono" />
              </div>
            ))}
          </div>
          <div className="mt-4 border-t border-line pt-4">
            <div className="flex justify-between font-display text-lg">
              <span>Total</span>
              <Price cents={total} className="font-mono" />
            </div>
          </div>
        </div>

        {/* Checkout options */}
        <div>
          {mode === 'logged-in' ? (
            <div>
              <h3 className="font-display text-lg">Ready to checkout</h3>
              <p className="mt-2 text-sm text-muted">Logged in as {customer?.email}</p>
              <button
                onClick={async () => {
                  setCheckingOut(true);
                  setCheckoutError(null);
                  try {
                    // Mark that we're checking out so LogoutOnUnload doesn't clear cart
                    if (typeof window !== 'undefined') {
                      sessionStorage.setItem('isCheckingOut', 'true');
                      console.log('Checkout button clicked: isCheckingOut flag set');
                    }

                    const res = await fetch('/api/checkout', {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' },
                      body: JSON.stringify({ items, customerId: customer.id }),
                    });
                    const data = await res.json();
                    console.log('Checkout response:', { status: res.status, ok: res.ok, data });
                    if (!res.ok || !data.url) {
                      if (typeof window !== 'undefined') {
                        sessionStorage.removeItem('isCheckingOut');
                      }
                      throw new Error(data.error ?? 'Something went wrong starting checkout.');
                    }
                    console.log('Redirecting to Stripe:', data.url);
                    window.location.href = data.url;
                  } catch (err) {
                    const errorMsg = err instanceof Error ? err.message : 'Something went wrong.';
                    console.error('Checkout error:', errorMsg);
                    setCheckoutError(errorMsg);
                    setCheckingOut(false);
                  }
                }}
                disabled={checkingOut}
                className="mt-4 w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark disabled:opacity-60"
              >
                {checkingOut ? 'Processing…' : 'Continue to payment'}
              </button>
              {checkoutError && (
                <p className="mt-4 border border-splash-pink/40 bg-splash-pink/10 px-4 py-3 text-sm text-splash-pink">
                  {checkoutError}
                </p>
              )}
            </div>
          ) : mode === null ? (
            <div className="space-y-3">
              <p className="text-sm text-muted">How would you like to checkout?</p>
              <button
                onClick={() => setMode('login')}
                className="w-full border-2 border-ink px-6 py-3 text-sm font-medium text-ink hover:border-clay hover:bg-clay hover:text-paper"
              >
                Log in to existing account
              </button>
              <button
                onClick={() => setMode('guest')}
                className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
              >
                Continue as guest
              </button>
              <p className="text-xs text-muted">
                Don&apos;t have an account?{' '}
                <Link href="/account/register" className="text-clay hover:text-clay-dark">
                  Create one now
                </Link>
              </p>
            </div>
          ) : mode === 'login' ? (
            <div>
              <button
                onClick={() => setMode(null)}
                className="text-sm text-clay hover:text-clay-dark mb-4"
              >
                ← Back
              </button>
              <h3 className="font-display text-lg">Log in</h3>
              <form action={loginCustomer} className="mt-4 space-y-4">
                <input type="hidden" name="next" value="/checkout" />
                <div>
                  <label htmlFor="email" className="tag-label mb-2 block">
                    Email
                  </label>
                  <input
                    id="email"
                    name="email"
                    type="email"
                    required
                    className="w-full border border-line px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label htmlFor="password" className="tag-label mb-2 block">
                    Password
                  </label>
                  <input
                    id="password"
                    name="password"
                    type="password"
                    required
                    className="w-full border border-line px-3 py-2 text-sm"
                  />
                </div>
                <button type="submit" className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
                  Log in
                </button>
              </form>
            </div>
          ) : (
            <div>
              <button
                onClick={() => setMode(null)}
                className="text-sm text-clay hover:text-clay-dark mb-4"
              >
                ← Back
              </button>
              <h3 className="font-display text-lg">Guest checkout</h3>
              {checkoutError && (
                <p className="mt-4 border border-splash-pink/40 bg-splash-pink/10 px-4 py-3 text-sm text-splash-pink">
                  {checkoutError}
                </p>
              )}
              <form onSubmit={handleGuestCheckout} className="mt-4 space-y-4">
                <div>
                  <label htmlFor="fullName" className="tag-label mb-2 block">
                    Full name
                  </label>
                  <input
                    id="fullName"
                    type="text"
                    required
                    value={guestData.fullName}
                    onChange={(e) => setGuestData({ ...guestData, fullName: e.target.value })}
                    className="w-full border border-line px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label htmlFor="email" className="tag-label mb-2 block">
                    Email
                  </label>
                  <input
                    id="email"
                    type="email"
                    required
                    value={guestData.email}
                    onChange={(e) => setGuestData({ ...guestData, email: e.target.value })}
                    className="w-full border border-line px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label htmlFor="phone" className="tag-label mb-2 block">
                    Phone number
                  </label>
                  <input
                    id="phone"
                    type="tel"
                    required
                    value={guestData.phone}
                    onChange={(e) => setGuestData({ ...guestData, phone: e.target.value })}
                    className="w-full border border-line px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label htmlFor="address" className="tag-label mb-2 block">
                    Address
                  </label>
                  <textarea
                    id="address"
                    required
                    value={guestData.address}
                    onChange={(e) => setGuestData({ ...guestData, address: e.target.value })}
                    rows={3}
                    className="w-full border border-line px-3 py-2 text-sm"
                  />
                </div>
                <button
                  type="submit"
                  disabled={checkingOut}
                  className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark disabled:opacity-60"
                >
                  {checkingOut ? 'Processing…' : 'Continue to payment'}
                </button>
              </form>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}