"use client";

import { useMemo, useState } from "react";

type Plan={id:string;name:string;priceCents:number;setupFeeCents:number};
type Module={id:string;name:string;description:string;priceCents:number};

const money=(value:number)=>(value/100).toLocaleString("pt-BR",{style:"currency",currency:"BRL"});
const inputMoney=(value:number)=>(value/100).toFixed(2).replace(".",",");

export function ManualLeadPricingFields({plans,modules}:{plans:Plan[];modules:Module[]}){
  const [planId,setPlanId]=useState(plans[0]?.id??"");
  const [setupFee,setSetupFee]=useState(inputMoney(plans[0]?.setupFeeCents??0));
  const [selectedModules,setSelectedModules]=useState<string[]>([]);
  const plan=plans.find(item=>item.id===planId);
  const monthlyTotal=useMemo(()=>(plan?.priceCents??0)+modules.filter(item=>selectedModules.includes(item.id)).reduce((sum,item)=>sum+item.priceCents,0),[plan,modules,selectedModules]);

  function selectPlan(value:string){
    setPlanId(value);
    const selected=plans.find(item=>item.id===value);
    if(selected)setSetupFee(inputMoney(selected.setupFeeCents));
  }

  return <>
    <div className="form-grid two">
      <label>Plano<select name="planId" value={planId} onChange={event=>selectPlan(event.target.value)}>{plans.map(item=><option value={item.id} key={item.id}>{item.name} · {money(item.priceCents)}/mês</option>)}</select></label>
      <label>Taxa de adesão (R$)<input name="setupFee" inputMode="decimal" value={setupFee} onChange={event=>setSetupFee(event.target.value)} required/><small>O valor sugerido vem do plano, mas pode ser ajustado neste atendimento.</small></label>
    </div>
    {modules.length>0&&<fieldset><legend>Módulos adicionais</legend><div className="form-grid two">{modules.map(item=><label className="check-line" key={item.id}><input name="modules" type="checkbox" value={item.id} checked={selectedModules.includes(item.id)} onChange={event=>setSelectedModules(current=>event.target.checked?[...current,item.id]:current.filter(id=>id!==item.id))}/><span><strong>{item.name} · {money(item.priceCents)}/mês</strong><small>{item.description}</small></span></label>)}</div></fieldset>}
    <div className="plan-limit-summary"><span>Mensalidade calculada: <strong>{money(monthlyTotal)}</strong></span><span>A adesão será confirmada pelo valor preenchido acima.</span></div>
    <label className="check-line"><input name="createBilling" type="checkbox"/> Gerar agora a cobrança da adesão e a assinatura mensal no Asaas</label>
  </>;
}