import { Icono } from '@gustito/shared/iconos';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { formatUsd, formatBs, bsDesdeUsd } from '@gustito/shared';
import { supabase } from '../lib/supabase';
import { subirComprobante } from '../lib/storage';

interface DatosPago {
  pago_id: string | null;
  metodo_pago: string;
  pago_estado: string;
  total_usd: number;
  tasa_bs: number | null;
  datos_pago: Record<string, string> | null;
  telefono_rest: string | null;
}

const METODO_LABEL: Record<string, string> = {
  pago_movil: 'Pago Movil',
  zelle: 'Zelle',
  transferencia: 'Transferencia',
  efectivo: 'Efectivo',
};

export default function SeccionPago({ pedidoId }: { pedidoId: string }) {
  const { data, refetch } = useQuery({
    queryKey: ['pago', pedidoId],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('pedido_datos_pago', { p_pedido_id: pedidoId });
      if (error) throw error;
      return (data as unknown as DatosPago[])?.[0] ?? null;
    },
    refetchInterval: 10000,
  });

  const [referencia, setReferencia] = useState('');
  const [file, setFile] = useState<File | null>(null);
  const [enviando, setEnviando] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);

  if (!data) return null;
  const metodo = data.metodo_pago;

  if (metodo === 'efectivo') {
    return (
      <Caja>
        <p className="text-sm">
          Pagas en <b>efectivo</b> al recibir tu pedido.
        </p>
      </Caja>
    );
  }
  if (data.pago_estado === 'confirmado') {
    return (
      <Caja>
        <p className="flex items-center gap-1.5 text-sm font-bold text-green-700">
          <Icono nombre="check" className="h-4 w-4" grosor={2.2} />
          Pago confirmado
        </p>
      </Caja>
    );
  }

  const d = data.datos_pago ?? {};
  const totalBs = data.tasa_bs ? bsDesdeUsd(data.total_usd, data.tasa_bs) : null;

  async function enviar() {
    setEnviando(true);
    setMsg(null);
    try {
      let path = '';
      if (file) path = await subirComprobante(file, pedidoId);
      const { error } = await supabase.rpc('registrar_comprobante', {
        p_pedido_id: pedidoId,
        p_referencia: referencia || '',
        p_comprobante_url: path || '',
      });
      if (error) throw error;
      setMsg('Comprobante enviado. El restaurante lo verificara.');
      setReferencia('');
      setFile(null);
      refetch();
    } catch (e) {
      setMsg((e as Error).message);
    } finally {
      setEnviando(false);
    }
  }

  return (
    <Caja>
      <h3 className="font-extrabold">Paga tu pedido</h3>
      <p className="text-xs text-stone-500 mb-3">
        {METODO_LABEL[metodo] ?? metodo} · {formatUsd(data.total_usd)}
        {totalBs ? ` · ${formatBs(totalBs)}` : ''}
      </p>

      <div className="bg-stone-50 rounded-xl p-3 text-sm space-y-1 mb-3">
        {metodo === 'pago_movil' && (
          <>
            <Fila k="Banco" v={d.banco} />
            <Fila k="Cedula/RIF" v={d.cedula} />
            <Fila k="Telefono" v={d.telefono} />
          </>
        )}
        {metodo === 'zelle' && (
          <>
            <Fila k="Correo" v={d.correo} />
            <Fila k="Titular" v={d.titular} />
          </>
        )}
        {metodo === 'transferencia' && (
          <>
            <Fila k="Banco" v={d.banco} />
            <Fila k="Cuenta" v={d.cuenta} />
            <Fila k="Titular" v={d.titular} />
          </>
        )}
        {!data.datos_pago && (
          <p className="text-stone-500">
            Coordina el pago con el restaurante{data.telefono_rest ? `: ${data.telefono_rest}` : ''}.
          </p>
        )}
      </div>

      <p className="mb-2 text-xs text-stone-500">
        Pon los <b className="text-marca-oscuro">últimos 4 dígitos</b> de la referencia y adjunta la captura del pago.
      </p>
      <input
        className="input mb-2"
        placeholder="Últimos 4 dígitos de la referencia"
        inputMode="numeric"
        maxLength={4}
        value={referencia}
        onChange={(e) => setReferencia(e.target.value.replace(/\D/g, '').slice(0, 4))}
      />
      <label className="block mb-3">
        <span className="text-xs font-semibold text-stone-500">Captura del pago</span>
        <input
          type="file"
          accept="image/*"
          className="mt-1 block text-sm"
          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
        />
      </label>
      {msg && <p className="text-sm text-marca-oscuro mb-2">{msg}</p>}
      <button
        onClick={enviar}
        disabled={enviando || (!referencia && !file)}
        className="w-full bg-marca text-marca-contraste font-bold rounded-2xl py-3 disabled:opacity-60 active:scale-[0.99] transition"
      >
        {enviando ? 'Enviando...' : 'Ya pague, enviar comprobante'}
      </button>
      {data.pago_estado === 'verificando' && (
        <p className="text-xs text-amber-600 mt-2">
          Comprobante recibido. Esperando que el restaurante lo confirme.
        </p>
      )}
    </Caja>
  );
}

function Caja({ children }: { children: React.ReactNode }) {
  return <div className="bg-white rounded-2xl p-4 shadow-tarjeta">{children}</div>;
}

function Fila({ k, v }: { k: string; v?: string }) {
  return (
    <div className="flex justify-between gap-2">
      <span className="text-stone-500">{k}</span>
      {v ? (
        <button
          onClick={() => navigator.clipboard.writeText(v)}
          className="font-semibold text-right hover:underline"
          title="Copiar"
        >
          {v}
        </button>
      ) : (
        <span className="text-stone-400">—</span>
      )}
    </div>
  );
}
