import React from "react";
import { StoreERP, Billing, PaymentPlan, PartnerSales } from "../../src/services/lookup.service";
import { ArrowLeft, ArrowRight } from "lucide-react";

interface PaymentStepProps {
  paymentForm: {
    invoiceStore: StoreERP | null;
    billing: Billing | null;
    paymentPlan: PaymentPlan | null;
    partner: PartnerSales | null;
  };
  paymentErrors: Record<string, string>;
  stores: StoreERP[];
  billings: Billing[];
  paymentPlans: PaymentPlan[];
  partners: PartnerSales[];
  isLoadingPaymentData: boolean;
  onInvoiceStoreChange: (store: StoreERP | null) => void;
  onBillingChange: (billing: Billing | null) => void;
  onPaymentPlanChange: (plan: PaymentPlan | null) => void;
  onPartnerChange: (partner: PartnerSales | null) => void;
  onPrevious: () => void;
  onNext: () => void;
}

const PaymentStep: React.FC<PaymentStepProps> = ({
  paymentForm,
  paymentErrors,
  stores,
  billings,
  paymentPlans,
  partners,
  isLoadingPaymentData,
  onInvoiceStoreChange,
  onBillingChange,
  onPaymentPlanChange,
  onPartnerChange,
  onPrevious,
  onNext,
}) => {
  return (
    <div className="animate-fade-in">
      <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-6">
        Pagamento
      </h3>

      <form className="space-y-4">
        <div>
          <label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
            Filial de venda
          </label>
          <select
            value={paymentForm.invoiceStore?.id || ""}
            onChange={(e) => {
              const store = stores.find((s) => s.id === e.target.value);
              onInvoiceStoreChange(store || null);
            }}
            className={`w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border ${
              paymentErrors.invoiceStore ? "border-red-500" : "border-slate-200"
            } focus:outline-none focus:ring-2 focus:ring-orange-500/20`}
            disabled={isLoadingPaymentData}
          >
            <option value="">Selecione a filial</option>
            {stores.map((store) => (
              <option key={store.id} value={store.id}>
                {store.shortName} - {store.name}
              </option>
            ))}
          </select>
          {paymentErrors.invoiceStore && (
            <p className="text-red-500 text-xs mt-1">
              {paymentErrors.invoiceStore}
            </p>
          )}
        </div>

        <div>
          <label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
            Cobrança
          </label>
          <select
            value={paymentForm.billing?.codcob || ""}
            onChange={(e) => {
              const billing = billings.find((b) => b.codcob === e.target.value);
              onBillingChange(billing || null);
            }}
            className={`w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border ${
              paymentErrors.billing ? "border-red-500" : "border-slate-200"
            } focus:outline-none focus:ring-2 focus:ring-orange-500/20`}
            disabled={isLoadingPaymentData || billings.length === 0}
          >
            <option value="">Selecione a cobrança</option>
            {billings.map((billing) => (
              <option key={billing.codcob} value={billing.codcob}>
                {billing.cobranca}
              </option>
            ))}
          </select>
          {paymentErrors.billing && (
            <p className="text-red-500 text-xs mt-1">{paymentErrors.billing}</p>
          )}
        </div>

        <div>
          <label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
            Plano de pagamento
          </label>
          <select
            value={paymentForm.paymentPlan?.codplpag || ""}
            onChange={(e) => {
              const plan = paymentPlans.find(
                (p) => p.codplpag.toString() === e.target.value
              );
              onPaymentPlanChange(plan || null);
            }}
            className={`w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border ${
              paymentErrors.paymentPlan ? "border-red-500" : "border-slate-200"
            } focus:outline-none focus:ring-2 focus:ring-orange-500/20`}
            disabled={
              isLoadingPaymentData ||
              !paymentForm.billing ||
              paymentPlans.length === 0
            }
          >
            <option value="">Selecione o plano de pagamento</option>
            {paymentPlans.map((plan) => (
              <option key={plan.codplpag} value={plan.codplpag}>
                {plan.descricao}
              </option>
            ))}
          </select>
          {paymentErrors.paymentPlan && (
            <p className="text-red-500 text-xs mt-1">
              {paymentErrors.paymentPlan}
            </p>
          )}
        </div>

        <div>
          <label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
            Parceiro Jurunense
          </label>
          <select
            value={paymentForm.partner?.id || ""}
            onChange={(e) => {
              const partner = partners.find(
                (p) => p.id.toString() === e.target.value
              );
              onPartnerChange(partner || null);
            }}
            className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20"
            disabled={isLoadingPaymentData}
          >
            <option value="">Selecione o parceiro (opcional)</option>
            {partners.map((partner) => (
              <option key={partner.id} value={partner.id}>
                {partner.name}
              </option>
            ))}
          </select>
        </div>

        <div className="flex justify-between gap-2 mt-6">
          <button
            type="button"
            onClick={onPrevious}
            className="flex items-center gap-2 bg-slate-100 px-6 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest text-[#002147] hover:bg-slate-200 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Retornar
          </button>
          <button
            type="button"
            onClick={onNext}
            className="flex items-center gap-2 bg-[#002147] text-white px-6 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-[#003366] transition-colors"
          >
            Avançar
            <ArrowRight className="w-4 h-4" />
          </button>
        </div>
      </form>
    </div>
  );
};

export default PaymentStep;