'use client';

import Link from 'next/link';
import { ChangeEvent, useEffect, useMemo, useState } from 'react';
import { formatCep, lookupCep } from '../../lib/cep';
import { PublicFlowNav } from '../public-flow-nav';
import { calculateCartPricing, defaultOrderState, fetchStorefront, formatCurrency, readOrderState, type CheckoutProfile, type Storefront, writeOrderState } from '../lib/public-order-store';

export default function PublicOrderCheckoutPage() {
  const [values, setValues] = useState<CheckoutProfile>(defaultOrderState.checkout);
  const [itemsCount, setItemsCount] = useState(0);
  const [acceptsCashOnDelivery, setAcceptsCashOnDelivery] = useState(false);
  const [storefront, setStorefront] = useState<Storefront | null>(null);
  const [cepError, setCepError] = useState('');
  const [lookingUpCep, setLookingUpCep] = useState(false);

  useEffect(() => {
    const load = async () => {
      const state = readOrderState();
      setValues(state.checkout);
      setItemsCount(state.cart.length);
      try {
        const storefront = await fetchStorefront(state.restaurantSlug);
        setStorefront(storefront);
        setAcceptsCashOnDelivery(Boolean(storefront.acceptsCashOnDelivery));
        if (!storefront.acceptsCashOnDelivery && state.checkout.paymentMethod === 'CASH') {
          const next = { ...state.checkout, paymentMethod: 'PIX' as const };
          setValues(next);
          writeOrderState({ ...defaultOrderState, ...state, checkout: next });
        }
      } catch {
        setAcceptsCashOnDelivery(false);
      }
    };

    void load();
  }, []);

  const handleChange = (key: keyof CheckoutProfile) => (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const next = { ...values, [key]: key === 'zipCode' ? formatCep(event.target.value) : event.target.value };
    setValues(next);
    const state = readOrderState();
    writeOrderState({ ...defaultOrderState, ...state, checkout: next });
  };

  const handleLookupCep = async () => {
    setCepError('');
    setLookingUpCep(true);
    try {
      const payload = await lookupCep(values.zipCode);
      const next = {
        ...values,
        zipCode: payload.zipCode,
        street: payload.street || values.street,
        neighborhood: payload.neighborhood || values.neighborhood,
        city: payload.city || values.city,
        state: payload.state || values.state,
        complement: values.complement || payload.complement,
      };
      setValues(next);
      const state = readOrderState();
      writeOrderState({ ...defaultOrderState, ...state, checkout: next });
    } catch (error) {
      setCepError(error instanceof Error ? error.message : 'Falha ao consultar o CEP.');
    } finally {
      setLookingUpCep(false);
    }
  };

  const completion = useMemo(() => {
    const required = [values.fullName, values.phone, values.street, values.number, values.neighborhood, values.city, values.state, values.zipCode];
    return Math.round((required.filter(Boolean).length / required.length) * 100);
  }, [values]);
  const pricing = useMemo(
    () =>
      calculateCartPricing(
        { ...defaultOrderState, ...readOrderState(), checkout: values },
        storefront,
      ),
    [storefront, values],
  );

  return (
    <main className="min-h-screen bg-[#f7f7f8] px-4 py-4 text-slate-950 lg:px-8 lg:py-6">
      <div className="mx-auto grid max-w-6xl gap-6 xl:grid-cols-[1.15fr_0.85fr]">
        <div className="xl:col-span-2">
          <PublicFlowNav />
        </div>

        <section className="rounded-[2rem] bg-white p-6 shadow-[0_14px_40px_rgba(15,23,42,0.06)]">
          <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Checkout</p>
          <h1 className="mt-3 text-4xl font-black tracking-tight text-slate-950">Entrega</h1>
          <div className="mt-6 grid gap-4 md:grid-cols-2">
            {[
              ['fullName', 'Cliente'],
              ['phone', 'Telefone'],
              ['email', 'Email'],
              ['street', 'Rua'],
              ['number', 'Numero'],
              ['complement', 'Complemento'],
              ['neighborhood', 'Bairro'],
              ['city', 'Cidade'],
              ['state', 'Estado'],
            ].map(([key, label]) => (
              <label key={key} className="grid gap-2">
                <span className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">{label}</span>
                <input value={values[key as keyof CheckoutProfile] as string} onChange={handleChange(key as keyof CheckoutProfile)} className="h-12 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 outline-none" />
              </label>
            ))}
            <label className="grid gap-2">
              <span className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">CEP</span>
              <div className="flex gap-2">
                <input value={values.zipCode} onChange={handleChange('zipCode')} className="h-12 flex-1 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 outline-none" />
                <button type="button" onClick={() => void handleLookupCep()} className="rounded-[1rem] bg-slate-950 px-4 text-xs font-black uppercase tracking-[0.18em] text-white">
                  {lookingUpCep ? 'Buscando...' : 'Buscar CEP'}
                </button>
              </div>
            </label>
            <label className="grid gap-2 md:col-span-2">
              <span className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">Observacoes</span>
              <textarea value={values.notes} onChange={handleChange('notes')} className="min-h-28 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 outline-none" />
            </label>
          </div>
          {cepError ? <p className="mt-4 rounded-[1rem] border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{cepError}</p> : null}
        </section>

        <aside className="rounded-[2rem] bg-white p-6 shadow-[0_14px_40px_rgba(15,23,42,0.06)]">
          <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Pagamento</p>
          <div className="mt-4 space-y-3">
            {[
              ['PIX', 'PIX imediato'],
              ['CREDIT_CARD', 'Cartao salvo'],
              ...(acceptsCashOnDelivery ? [['CASH', 'Pagamento na entrega']] : []),
            ].map(([value, method]) => (
              <button key={value} type="button" onClick={() => {
                const next = { ...values, paymentMethod: value as CheckoutProfile['paymentMethod'] };
                setValues(next);
                const state = readOrderState();
                writeOrderState({ ...defaultOrderState, ...state, checkout: next });
              }} className={`w-full rounded-[1.2rem] border px-4 py-3 text-left ${values.paymentMethod === value ? 'border-slate-950 bg-slate-950 text-white' : 'border-slate-200 bg-slate-50 text-slate-900'}`}>
                <p className="text-sm font-black">{method}</p>
              </button>
            ))}
          </div>
          <div className="mt-6 rounded-[1.2rem] border border-slate-200 bg-slate-50 px-4 py-3">
            <div className="flex items-center justify-between text-sm">
              <span>Itens</span>
              <strong>{itemsCount}</strong>
            </div>
            <div className="mt-2 flex items-center justify-between text-sm">
              <span>Preenchimento</span>
              <strong>{completion}%</strong>
            </div>
            <div className="mt-3 flex items-center justify-between border-t border-slate-200 pt-3 text-sm">
              <span>Total</span>
              <strong>{formatCurrency(pricing.total)}</strong>
            </div>
          </div>
          <div className="mt-4 rounded-[1.2rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
            {acceptsCashOnDelivery
              ? 'Esta loja aceita pagamento na entrega alem dos meios online.'
              : 'Esta loja recebe apenas pagamentos online na plataforma. Dinheiro na entrega nao esta habilitado.'}
          </div>
          <div className="mt-6 flex flex-col gap-3">
            <Link href="/public-order/payment" className="inline-flex min-h-[3rem] items-center justify-center rounded-full bg-slate-950 px-4 text-xs font-black uppercase tracking-[0.18em] text-white">
              Ir para pagamento
            </Link>
            <Link href="/public-order/cart" className="inline-flex min-h-[3rem] items-center justify-center rounded-full border border-slate-200 bg-white px-4 text-xs font-black uppercase tracking-[0.18em] text-slate-800">
              Voltar ao carrinho
            </Link>
          </div>
        </aside>
      </div>
    </main>
  );
}