'use client';

import { Panel, StatCard } from '@chego/ui';
import { useEffect, useMemo, useState } from 'react';
import { currency, fetchWithSession } from './api-helpers';
import { formatCep, lookupCep } from '../lib/cep';

type RestaurantProfile = {
  id: string;
  name: string;
  slug: string;
  description?: string | null;
  logoUrl?: string | null;
  coverImageUrl?: string | null;
  documentNumber: string;
  street?: string | null;
  number?: string | null;
  complement?: string | null;
  city?: string | null;
  neighborhood?: string | null;
  state?: string | null;
  zipCode?: string | null;
  latitude?: number | string | null;
  longitude?: number | string | null;
  acceptsCashOnDelivery?: boolean | null;
  isOpen: boolean;
  isPaused: boolean;
  user: {
    email?: string | null;
    phone?: string | null;
  };
  pixKey?: string | null;
  wallet?: {
    balance?: number | string | null;
    blockedBalance?: number | string | null;
  } | null;
  _count?: {
    orders?: number;
    products?: number;
    promotions?: number;
  };
};

type SettlementPolicy = {
  platformReceivesAllOnlinePayments: boolean;
  restaurantPayoutDelayDays: number;
  policyLabel: string;
};

type OrderFlowSettings = {
  acceptMode: 'MANUAL' | 'AUTOMATIC';
  autoRequestDeliveryWhenReady: boolean;
  driverPresenceWindowMinutes: number;
};

type FormState = {
  name: string;
  slug: string;
  description: string;
  street: string;
  number: string;
  complement: string;
  city: string;
  neighborhood: string;
  state: string;
  zipCode: string;
  latitude: string;
  longitude: string;
  ownerEmail: string;
  ownerPhone: string;
  pixKey: string;
  logoUrl: string;
  coverImageUrl: string;
  acceptsCashOnDelivery: boolean;
  isOpen: boolean;
  isPaused: boolean;
};

const emptyForm: FormState = {
  name: '',
  slug: '',
  description: '',
  street: '',
  number: '',
  complement: '',
  city: '',
  neighborhood: '',
  state: '',
  zipCode: '',
  latitude: '',
  longitude: '',
  ownerEmail: '',
  ownerPhone: '',
  pixKey: '',
  logoUrl: '',
  coverImageUrl: '',
  acceptsCashOnDelivery: false,
  isOpen: true,
  isPaused: false,
};

function normalizeRestaurantProfile(payload: unknown): RestaurantProfile {
  const item = (payload && typeof payload === 'object' ? payload : {}) as Record<string, unknown>;
  const user = (item.user && typeof item.user === 'object' ? item.user : {}) as Record<string, unknown>;
  const wallet = (item.wallet && typeof item.wallet === 'object' ? item.wallet : null) as Record<string, unknown> | null;
  const counters = (item._count && typeof item._count === 'object' ? item._count : {}) as Record<string, unknown>;

  return {
    id: String(item.id ?? ''),
    name: String(item.name ?? ''),
    slug: String(item.slug ?? ''),
    description: typeof item.description === 'string' ? item.description : null,
    logoUrl: typeof item.logoUrl === 'string' ? item.logoUrl : null,
    coverImageUrl: typeof item.coverImageUrl === 'string' ? item.coverImageUrl : null,
    documentNumber: String(item.documentNumber ?? ''),
    street: typeof item.street === 'string' ? item.street : null,
    number: typeof item.number === 'string' ? item.number : null,
    complement: typeof item.complement === 'string' ? item.complement : null,
    city: typeof item.city === 'string' ? item.city : null,
    neighborhood: typeof item.neighborhood === 'string' ? item.neighborhood : null,
    state: typeof item.state === 'string' ? item.state : null,
    zipCode: typeof item.zipCode === 'string' ? item.zipCode : null,
    latitude: item.latitude == null ? null : String(item.latitude),
    longitude: item.longitude == null ? null : String(item.longitude),
    acceptsCashOnDelivery: Boolean(item.acceptsCashOnDelivery),
    isOpen: Boolean(item.isOpen),
    isPaused: Boolean(item.isPaused),
    user: {
      email: typeof user.email === 'string' ? user.email : null,
      phone: typeof user.phone === 'string' ? user.phone : null,
    },
    pixKey: typeof item.pixKey === 'string' ? item.pixKey : null,
    wallet: wallet
      ? {
          balance: wallet.balance == null ? null : String(wallet.balance),
          blockedBalance: wallet.blockedBalance == null ? null : String(wallet.blockedBalance),
        }
      : null,
    _count: {
      orders: Number(counters.orders ?? 0),
      products: Number(counters.products ?? 0),
      promotions: Number(counters.promotions ?? 0),
    },
  };
}

export function StoreSettingsPanel() {
  const [profile, setProfile] = useState<RestaurantProfile | null>(null);
  const [settlementPolicy, setSettlementPolicy] = useState<SettlementPolicy | null>(null);
  const [orderFlowSettings, setOrderFlowSettings] = useState<OrderFlowSettings>({
    acceptMode: 'MANUAL',
    autoRequestDeliveryWhenReady: false,
    driverPresenceWindowMinutes: 10,
  });
  const [form, setForm] = useState<FormState>(emptyForm);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [lookingUpCep, setLookingUpCep] = useState(false);
  const [uploadingField, setUploadingField] = useState<'logoUrl' | 'coverImageUrl' | ''>('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const hydrateForm = (item: RestaurantProfile) => {
    setForm({
      name: item.name ?? '',
      slug: item.slug ?? '',
      description: item.description ?? '',
      street: item.street ?? '',
      number: item.number ?? '',
      complement: item.complement ?? '',
      city: item.city ?? '',
      neighborhood: item.neighborhood ?? '',
      state: item.state ?? '',
      zipCode: item.zipCode ?? '',
      latitude: item.latitude !== null && item.latitude !== undefined ? String(item.latitude) : '',
      longitude: item.longitude !== null && item.longitude !== undefined ? String(item.longitude) : '',
      ownerEmail: item.user.email ?? '',
      ownerPhone: item.user.phone ?? '',
      pixKey: item.pixKey ?? '',
      logoUrl: item.logoUrl ?? '',
      coverImageUrl: item.coverImageUrl ?? '',
      acceptsCashOnDelivery: Boolean(item.acceptsCashOnDelivery),
      isOpen: item.isOpen,
      isPaused: item.isPaused,
    });
  };

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const [profilePayload, policyPayload, flowPayload] = await Promise.all([
        fetchWithSession('/restaurant/profile'),
        fetchWithSession('/payments/settlement-policy'),
        fetchWithSession('/orders/flow-settings'),
      ]);
      const normalizedProfile = normalizeRestaurantProfile(profilePayload);
      setProfile(normalizedProfile);
      hydrateForm(normalizedProfile);
      setSettlementPolicy(policyPayload as SettlementPolicy);
      setOrderFlowSettings(flowPayload as OrderFlowSettings);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar as configuracoes da loja.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
  }, []);

  const stats = useMemo(
    () => ({
      balance: currency(profile?.wallet?.balance),
      orders: String(profile?._count?.orders ?? 0),
      products: String(profile?._count?.products ?? 0),
      promotions: String(profile?._count?.promotions ?? 0),
    }),
    [profile],
  );

  const submit = async () => {
    setSaving(true);
    setError('');
    setSuccess('');
    try {
      const payload = Object.fromEntries(
        Object.entries(form).filter(([, value]) => {
          if (typeof value === 'boolean') {
            return true;
          }
          return value.trim() !== '';
        }),
      );

      const [updatedProfile] = await Promise.all([
        fetchWithSession('/restaurant/profile', {
          method: 'PATCH',
          body: JSON.stringify(payload),
        }),
        fetchWithSession('/orders/flow-settings', {
          method: 'PATCH',
          body: JSON.stringify(orderFlowSettings),
        }),
      ]);
      const normalizedProfile = normalizeRestaurantProfile(updatedProfile);
      setProfile(normalizedProfile);
      hydrateForm(normalizedProfile);
      setSuccess('Configuracoes da loja atualizadas com sucesso.');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao salvar configuracoes.');
    } finally {
      setSaving(false);
    }
  };

  const lookupStoreCep = async () => {
    setLookingUpCep(true);
    setError('');
    setSuccess('');
    try {
      const payload = await lookupCep(form.zipCode);
      setForm((current) => ({
        ...current,
        zipCode: payload.zipCode,
        street: payload.street || current.street,
        neighborhood: payload.neighborhood || current.neighborhood,
        city: payload.city || current.city,
        state: payload.state || current.state,
        complement: current.complement || payload.complement,
      }));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao consultar o CEP da loja.');
    } finally {
      setLookingUpCep(false);
    }
  };

  const uploadBrandAsset = async (field: 'logoUrl' | 'coverImageUrl', file: File | null) => {
    if (!file) {
      return;
    }

    setUploadingField(field);
    setError('');
    setSuccess('');

    try {
      const data = new FormData();
      data.append('file', file);

      const response = await fetchWithSession(`/restaurant/profile/uploads/${field}`, {
        method: 'POST',
        body: data,
        headers: undefined,
      });

      const normalizedProfile = normalizeRestaurantProfile(response);
      setProfile(normalizedProfile);
      hydrateForm(normalizedProfile);
      setSuccess(field === 'logoUrl' ? 'Logo atualizada com sucesso.' : 'Capa da loja atualizada com sucesso.');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao enviar imagem da loja.');
    } finally {
      setUploadingField('');
    }
  };

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Saldo da loja" value={stats.balance} hint="wallet do parceiro" tone="emerald" />
        <StatCard label="Pedidos" value={stats.orders} hint="volume da unidade" tone="sky" />
        <StatCard label="Produtos" value={stats.products} hint="catalogo ativo" tone="amber" />
        <StatCard label="Promocoes" value={stats.promotions} hint="campanhas atuais" tone="rose" />
      </section>

      <Panel title="Configuracoes da loja" eyebrow="Operacao enxuta e objetiva">
        <div className="grid gap-4 xl:grid-cols-3">
          <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Aceite do pedido</p>
            <select
              value={orderFlowSettings.acceptMode}
              onChange={(event) => setOrderFlowSettings((current) => ({ ...current, acceptMode: event.target.value as OrderFlowSettings['acceptMode'] }))}
              className="mt-3 h-12 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900 outline-none"
            >
              <option value="MANUAL">Manual pela loja</option>
              <option value="AUTOMATIC">Automatico apos pagamento</option>
            </select>
            <p className="mt-3 text-sm leading-6 text-slate-600">Define se o pedido entra aguardando aceite da loja ou segue direto para preparo.</p>
          </div>

          <label className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
            <span className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Entrega automatica</span>
            <span className="mt-3 flex items-start gap-3">
              <input
                type="checkbox"
                checked={orderFlowSettings.autoRequestDeliveryWhenReady}
                onChange={(event) => setOrderFlowSettings((current) => ({ ...current, autoRequestDeliveryWhenReady: event.target.checked }))}
                className="mt-1 h-4 w-4 rounded border-slate-300"
              />
              <span className="text-sm leading-6 text-slate-600">
                Ao marcar um pedido como pronto, a plataforma ja tenta encontrar motoboys ativos e online.
              </span>
            </span>
          </label>

          <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Janela de presenca</p>
            <input
              type="number"
              min={1}
              max={60}
              value={orderFlowSettings.driverPresenceWindowMinutes}
              onChange={(event) => setOrderFlowSettings((current) => ({ ...current, driverPresenceWindowMinutes: Number(event.target.value || 10) }))}
              className="mt-3 h-12 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900 outline-none"
            />
            <p className="mt-3 text-sm leading-6 text-slate-600">Somente motoboys com atividade recente nessa janela recebem a corrida.</p>
          </div>
        </div>

        <div className="mt-5 grid gap-4 lg:grid-cols-2">
          <div className="rounded-[1.4rem] border border-slate-200 bg-white p-5">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Perfil basico</p>
            <p className="mt-3 text-sm leading-6 text-slate-600">
              O endereco abaixo e o endereco oficial da empresa. E nele que o entregador vai buscar o pedido.
            </p>
            <div className="mt-4 grid gap-4">
              <div className="grid gap-4 md:grid-cols-2">
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Logo da loja
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(event) => void uploadBrandAsset('logoUrl', event.target.files?.[0] ?? null)}
                    className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none file:mr-3 file:rounded-full file:border-0 file:bg-slate-900 file:px-4 file:py-2 file:text-xs file:font-black file:text-white"
                  />
                  <span className="text-xs font-medium text-slate-500">
                    {uploadingField === 'logoUrl' ? 'Enviando logo...' : form.logoUrl ? 'Logo cadastrada para esta loja.' : 'Cada parceiro usa a propria logo no app do cliente.'}
                  </span>
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Capa da loja
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(event) => void uploadBrandAsset('coverImageUrl', event.target.files?.[0] ?? null)}
                    className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none file:mr-3 file:rounded-full file:border-0 file:bg-slate-900 file:px-4 file:py-2 file:text-xs file:font-black file:text-white"
                  />
                  <span className="text-xs font-medium text-slate-500">
                    {uploadingField === 'coverImageUrl' ? 'Enviando capa...' : form.coverImageUrl ? 'Capa cadastrada para esta loja.' : 'A capa apoia a vitrine da loja sem roubar o foco da comida.'}
                  </span>
                </label>
              </div>
              <label className="grid gap-2 text-sm font-semibold text-slate-700">
                Nome da loja
                <input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
              </label>
              <label className="grid gap-2 text-sm font-semibold text-slate-700">
                Slug publico
                <input value={form.slug} onChange={(event) => setForm((current) => ({ ...current, slug: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
              </label>
              <label className="grid gap-2 text-sm font-semibold text-slate-700">
                Descricao curta
                <textarea value={form.description} onChange={(event) => setForm((current) => ({ ...current, description: event.target.value }))} rows={3} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
              </label>
              <div className="grid gap-4 md:grid-cols-2">
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Rua
                  <input value={form.street} onChange={(event) => setForm((current) => ({ ...current, street: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Numero
                  <input value={form.number} onChange={(event) => setForm((current) => ({ ...current, number: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
              </div>
              <label className="grid gap-2 text-sm font-semibold text-slate-700">
                Complemento
                <input value={form.complement} onChange={(event) => setForm((current) => ({ ...current, complement: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
              </label>
              <div className="grid gap-4 md:grid-cols-2">
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Cidade
                  <input value={form.city} onChange={(event) => setForm((current) => ({ ...current, city: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Bairro
                  <input value={form.neighborhood} onChange={(event) => setForm((current) => ({ ...current, neighborhood: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
              </div>
              <div className="grid gap-4 md:grid-cols-2">
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Estado
                  <input value={form.state} onChange={(event) => setForm((current) => ({ ...current, state: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  CEP
                  <div className="flex gap-2">
                    <input
                      value={form.zipCode}
                      onChange={(event) => setForm((current) => ({ ...current, zipCode: formatCep(event.target.value) }))}
                      className="flex-1 rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none"
                    />
                    <button
                      type="button"
                      onClick={() => void lookupStoreCep()}
                      className="rounded-[1rem] bg-slate-900 px-4 py-3 text-xs font-black uppercase tracking-[0.18em] text-white"
                    >
                      {lookingUpCep ? 'Buscando...' : 'Buscar CEP'}
                    </button>
                  </div>
                </label>
              </div>
              <div className="grid gap-4 md:grid-cols-2">
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Latitude da loja
                  <input value={form.latitude} onChange={(event) => setForm((current) => ({ ...current, latitude: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" placeholder="-22.91216" />
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Longitude da loja
                  <input value={form.longitude} onChange={(event) => setForm((current) => ({ ...current, longitude: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" placeholder="-43.23018" />
                </label>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <div className="rounded-[1.4rem] border border-slate-200 bg-white p-5">
              <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Contato e operacao</p>
              <div className="mt-4 grid gap-4">
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Email do responsavel
                  <input value={form.ownerEmail} onChange={(event) => setForm((current) => ({ ...current, ownerEmail: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Telefone do responsavel
                  <input value={form.ownerPhone} onChange={(event) => setForm((current) => ({ ...current, ownerPhone: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
                </label>
                <label className="grid gap-2 text-sm font-semibold text-slate-700">
                  Chave PIX para repasse
                  <input value={form.pixKey} onChange={(event) => setForm((current) => ({ ...current, pixKey: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" placeholder="cpf, cnpj, e-mail, telefone ou chave aleatoria" />
                </label>
                <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
                  <input type="checkbox" checked={form.acceptsCashOnDelivery} onChange={(event) => setForm((current) => ({ ...current, acceptsCashOnDelivery: event.target.checked }))} />
                  Aceitar dinheiro na entrega
                </label>
                <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
                  <input type="checkbox" checked={form.isOpen} onChange={(event) => setForm((current) => ({ ...current, isOpen: event.target.checked }))} />
                  Loja aberta para novos pedidos
                </label>
                <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
                  <input type="checkbox" checked={form.isPaused} onChange={(event) => setForm((current) => ({ ...current, isPaused: event.target.checked }))} />
                  Loja pausada temporariamente
                </label>
              </div>
            </div>

            <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-5">
              <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Repasse e plataforma</p>
              <p className="mt-3 text-sm text-slate-700">
                Documento cadastrado: <strong>{profile?.documentNumber ?? '--'}</strong>
              </p>
              <p className="mt-2 text-sm text-slate-700">
                Fluxo financeiro:{' '}
                <strong>{settlementPolicy?.platformReceivesAllOnlinePayments ? 'a plataforma recebe os pagamentos online' : 'split direto habilitado'}</strong>
              </p>
              <p className="mt-2 text-sm text-slate-700">
                Prazo de repasse: <strong>{settlementPolicy?.restaurantPayoutDelayDays ?? 0} dias</strong>
              </p>
              <p className="mt-2 text-sm text-slate-700">
                PIX cadastrado: <strong>{profile?.pixKey || 'nao informado'}</strong>
              </p>
              <p className="mt-3 text-sm leading-6 text-slate-600">{settlementPolicy?.policyLabel ?? 'Politica operacional carregando...'}</p>
            </div>
          </div>
        </div>

        {error ? <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}
        {success ? <p className="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{success}</p> : null}

        <div className="mt-6 flex flex-wrap gap-3">
          <button type="button" onClick={() => void submit()} disabled={saving || loading} className="rounded-full border border-slate-900 bg-slate-900 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-white disabled:opacity-60">
            {saving ? 'Salvando...' : 'Salvar configuracoes'}
          </button>
          <button type="button" onClick={() => void load()} disabled={loading} className="rounded-full border border-slate-200 bg-white px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-slate-800">
            Recarregar
          </button>
        </div>

        {loading ? <p className="mt-4 text-sm text-slate-500">Carregando configuracoes reais da loja...</p> : null}
      </Panel>
    </div>
  );
}