/* Dulius App — Funding Application (mirrors the Jacobs Family Advisors / Cognito intake)
   Every ★ field is required & validated. Bank statements + bank connection are
   skippable (pushed, never a roadblocker). On submit → synced to our team (Salesforce). */

const ENTITY_TYPES = ["LLC", "S-Corporation", "C-Corporation", "Sole Proprietorship", "Partnership", "Non-Profit"];
const US_STATES = ["AL","AK","AZ","AR","CA","CO","CT","DE","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"];
const USE_OF_FUNDS = ["Working capital", "Inventory / supplies", "Equipment", "Expansion / new location", "Marketing", "Payroll", "Debt refinance", "Other"];
const APPLY_STEPS = ["Business", "Owner", "Capital", "Bank & docs", "Sign & submit"];

function AField({ label, req, children, hint, full }) {
  return (
    <label className={`afa-field ${full ? "full" : ""}`}>
      <span className="afa-k">{label}{req && <span className="dreq">★</span>}</span>
      {children}
      {hint && <span className="afa-hint">{hint}</span>}
    </label>
  );
}

function applicationDefaults() {
  return {
    // business
    company: "", entity: "", industry: "", startDate: "", addr1: "", addr2: "", city: "", state: "", zip: "",
    dba: "", ein: "", website: "", revenue: "",
    // owner
    firstName: "", lastName: "", creditScore: "", ownership: "", hAddr1: "", hAddr2: "", hCity: "", hState: "", hZip: "",
    phone: "", email: "", dob: "", ssn: "",
    // 2nd owner (optional)
    o2first: "", o2last: "", o2credit: "", o2own: "", o2phone: "", o2email: "", o2dob: "", o2ssn: "",
    // capital
    amount: "", useOfFunds: "", hasWcl: "No", openBalances: "",
    // bank & docs (skippable)
    bankConnected: false, stmtsUploaded: 0,
    // authorization
    consent: false, printName: "", signed: false, date: new Date().toLocaleDateString(),
  };
}

function getBusinessProfileForApplication() {
  try {
    if (window.getStoredBusinessProfile) return window.getStoredBusinessProfile();
    return JSON.parse(localStorage.getItem("dulius:business-profile:v1") || "null") || {};
  } catch (e) { return {}; }
}

function buildApplicationSeed() {
  const p = getBusinessProfileForApplication();
  const ownerName = p.ownerName || DULIUS.user.name || "";
  const parts = ownerName.trim().split(/\s+/);
  const cleanEin = p.ein && p.ein.indexOf("*") === -1 ? p.ein : "";
  return {
    company: p.legalName || p.businessName || DULIUS.user.business || "",
    dba: p.businessName || "",
    entity: p.entity || "",
    industry: p.industry || DULIUS.user.industry || "",
    startDate: p.founded || "",
    addr1: p.address || "",
    city: p.city || "",
    state: p.state || "",
    zip: p.zip || "",
    ein: cleanEin,
    website: p.website || "",
    revenue: p.revenue || "",
    firstName: p.firstName || parts[0] || "",
    lastName: p.lastName || parts.slice(1).join(" ") || "",
    phone: p.phone || "",
    email: p.email || "",
    printName: ownerName,
  };
}

function FundingApplication({ onClose }) {
  const [step, setStep] = React.useState(0);
  const [show2nd, setShow2nd] = React.useState(false);
  const [f, setF] = React.useState(() => ({ ...applicationDefaults(), ...buildApplicationSeed() }));
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState("");
  const [submissionRef, setSubmissionRef] = React.useState("");
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));

  const top = React.useRef(null);
  React.useEffect(() => { if (top.current) top.current.scrollTop = 0; }, [step]);

  // ---- per-step validation of required (★) fields ----
  const valid = (st) => {
    if (st === 0) return f.company && f.entity && f.industry && f.startDate && f.addr1 && f.city && f.state && f.zip && f.ein;
    if (st === 1) return f.firstName && f.lastName && f.creditScore && f.ownership && f.hAddr1 && f.hCity && f.hState && f.hZip && f.phone && f.email && f.dob && f.ssn;
    if (st === 2) return f.amount && f.useOfFunds;
    if (st === 3) return true; // bank & docs always skippable
    if (st === 4) return f.consent && f.printName && f.signed && f.date;
    return true;
  };
  const canNext = valid(step);

  const submitApplication = async () => {
    if (!valid(4) || submitting) return;
    setSubmitting(true);
    setSubmitError("");
    try {
      const headers = { "Content-Type": "application/json" };
      if (window.Clerk && window.Clerk.session) {
        const token = await window.Clerk.session.getToken();
        if (token) headers.Authorization = "Bearer " + token;
      }
      const profile = getBusinessProfileForApplication();
      const response = await fetch("/api/submit", {
        method: "POST",
        headers,
        body: JSON.stringify({ source: "dulius-app", profile, application: f, submittedAt: new Date().toISOString() }),
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || result.ok === false) throw new Error(result.message || "Submit failed");
      setSubmissionRef(result.ref || result.reference || "");
      setStep(5);
    } catch (e) {
      void("[dulius] application submit failed", e && e.message);
      setSubmitError("We could not submit yet. Check your connection and try again.");
    } finally {
      setSubmitting(false);
    }
  };

  const inp = (k, ph, type = "text") => <input className="afa-in" type={type} value={f[k]} placeholder={ph} onChange={(e) => set(k, e.target.value)} />;

  return (
    <div className="dapply-wrap">
      <header className="dapply-nav">
        <div className="dapply-navleft">
          <img className="dapply-logo" src="../../assets/dulius-wordmark.png" alt="Dulius" />
          <span className="dapply-prog-name">Funding application</span>
        </div>
        <button className="dapply-close" onClick={onClose}><Icon name="x" size={20} /></button>
      </header>

      <div className="dapply-steps">
        {APPLY_STEPS.map((s, i) => (
          <div key={i} className={`dapply-step ${i < step ? "done" : ""} ${i === step ? "active" : ""}`}>
            <span className="dapply-dot">{i < step ? <Icon name="check" size={13} /> : i + 1}</span>
            <span className="dapply-slabel">{s}</span>
            {i < APPLY_STEPS.length - 1 && <span className="dapply-bar" />}
          </div>
        ))}
      </div>

      <main className="dapply-body" ref={top}>
        {/* STEP 0 — BUSINESS */}
        {step === 0 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Business information</h2>
            <p className="dapply-sub">Tell us about your business. Fields marked <span className="dreq">★</span> are required.</p>
            <div className="afa-grid">
              <AField label="Company name" req>{inp("company", "Company name")}</AField>
              <AField label="Entity type" req>
                <select className="afa-in" value={f.entity} onChange={(e) => set("entity", e.target.value)}><option value="">Select…</option>{ENTITY_TYPES.map((x) => <option key={x}>{x}</option>)}</select>
              </AField>
              <AField label="Industry type" req>{inp("industry", "Industry")}</AField>
              <AField label="Business start date" req hint="When did you start the business?">{inp("startDate", "MM/DD/YYYY")}</AField>
            </div>

            <div className="afa-subh">Business address <span className="dreq">★</span></div>
            <div className="afa-grid">
              <AField label="Address line 1" req full>{inp("addr1", "Address line 1")}</AField>
              <AField label="Address line 2" full>{inp("addr2", "Address line 2 (optional)")}</AField>
              <AField label="City" req>{inp("city", "City")}</AField>
              <AField label="State" req>
                <select className="afa-in" value={f.state} onChange={(e) => set("state", e.target.value)}><option value="">State</option>{US_STATES.map((x) => <option key={x}>{x}</option>)}</select>
              </AField>
              <AField label="Zip code" req>{inp("zip", "Zip")}</AField>
            </div>

            <div className="afa-grid">
              <AField label="DBA name" hint="If applicable">{inp("dba", "DBA name")}</AField>
              <AField label="Federal Tax ID (EIN)" req>{inp("ein", "EIN")}</AField>
              <AField label="Business website">{inp("website", "Website")}</AField>
              <AField label="Annual gross revenue">{inp("revenue", "Annual gross revenue")}</AField>
            </div>
          </div>
        )}

        {/* STEP 1 — OWNER */}
        {step === 1 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Owner information</h2>
            <p className="dapply-sub">Primary owner details. Used for identity verification and a soft credit pull — <strong>never a hard inquiry</strong>.</p>
            <div className="afa-grid">
              <AField label="First name" req>{inp("firstName", "First")}</AField>
              <AField label="Last name" req>{inp("lastName", "Last")}</AField>
              <AField label="Credit score" req>{inp("creditScore", "Est. credit score")}</AField>
              <AField label="Ownership %" req>{inp("ownership", "Ownership %")}</AField>
            </div>
            <div className="afa-subh">Home address <span className="dreq">★</span></div>
            <div className="afa-grid">
              <AField label="Address line 1" req full>{inp("hAddr1", "Address line 1")}</AField>
              <AField label="Address line 2" full>{inp("hAddr2", "Address line 2 (optional)")}</AField>
              <AField label="City" req>{inp("hCity", "City")}</AField>
              <AField label="State" req>
                <select className="afa-in" value={f.hState} onChange={(e) => set("hState", e.target.value)}><option value="">State</option>{US_STATES.map((x) => <option key={x}>{x}</option>)}</select>
              </AField>
              <AField label="Zip code" req>{inp("hZip", "Zip")}</AField>
            </div>
            <div className="afa-grid">
              <AField label="Phone number" req>{inp("phone", "Phone #", "tel")}</AField>
              <AField label="Email address" req>{inp("email", "Email", "email")}</AField>
              <AField label="Date of birth" req>{inp("dob", "MM/DD/YYYY")}</AField>
              <AField label="Social Security Number (SSN)" req hint="Encrypted · soft pull only">{inp("ssn", "SSN")}</AField>
            </div>

            <div className="afa-2ndtoggle">
              <button className={`afa-addowner ${show2nd ? "on" : ""}`} onClick={() => setShow2nd(!show2nd)}>
                <Icon name={show2nd ? "minus" : "plus"} size={16} /> {show2nd ? "Remove second owner" : "Add a second owner (if applicable)"}
              </button>
            </div>
            {show2nd && (
              <div className="afa-2nd">
                <div className="afa-subh">2nd owner information <span className="afa-opt">optional</span></div>
                <div className="afa-grid">
                  <AField label="First name">{inp("o2first", "First")}</AField>
                  <AField label="Last name">{inp("o2last", "Last")}</AField>
                  <AField label="Credit score">{inp("o2credit", "Est. credit score")}</AField>
                  <AField label="Ownership %">{inp("o2own", "Ownership %")}</AField>
                  <AField label="Phone number">{inp("o2phone", "Phone #", "tel")}</AField>
                  <AField label="Email address">{inp("o2email", "Email", "email")}</AField>
                  <AField label="Date of birth">{inp("o2dob", "MM/DD/YYYY")}</AField>
                  <AField label="SSN">{inp("o2ssn", "SSN")}</AField>
                </div>
              </div>
            )}
          </div>
        )}

        {/* STEP 2 — CAPITAL */}
        {step === 2 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Capital information</h2>
            <p className="dapply-sub">How much you're looking for and what it's for.</p>
            <div className="afa-grid">
              <AField label="Amount requested" req>{inp("amount", "Amount requested")}</AField>
              <AField label="Use of funds" req>
                <select className="afa-in" value={f.useOfFunds} onChange={(e) => set("useOfFunds", e.target.value)}><option value="">Select…</option>{USE_OF_FUNDS.map((x) => <option key={x}>{x}</option>)}</select>
              </AField>
            </div>
            <div className="afa-grid">
              <AField label="Do you have a working capital loan?">
                <div className="afa-seg">
                  {["Yes", "No"].map((x) => <button key={x} type="button" className={f.hasWcl === x ? "on" : ""} onClick={() => set("hasWcl", x)}>{x}</button>)}
                </div>
              </AField>
              <AField label="Open balances" hint="Approx. total of any current advances/loans">{inp("openBalances", "Open balances")}</AField>
            </div>
          </div>
        )}

        {/* STEP 3 — BANK & DOCS (skippable) */}
        {step === 3 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Bank &amp; documents</h2>
            <p className="dapply-sub">This is the single biggest driver of better offers — but you can <strong>skip it now and finish later</strong>. Funders almost always need it before they'll fund.</p>

            <div className="afa-pushbox">
              <Icon name="trending-up" size={18} />
              <div>Applications with bank data connected get matched to <strong>3× more offers</strong> and fund faster. We'll keep reminding you until it's done.</div>
            </div>

            <div className="afa-bankrow">
              <div className="afa-bankrow-l">
                <span className="afa-bankrow-ic"><Icon name="landmark" size={20} /></span>
                <div><div className="afa-bankrow-t">Connect your business bank</div><div className="afa-bankrow-s">Instant &amp; secure via Plaid · read-only · 10,000+ banks</div></div>
              </div>
              <button className={`dchip ${f.bankConnected ? "" : "ghost"}`} onClick={() => set("bankConnected", !f.bankConnected)}>
                <Icon name={f.bankConnected ? "check" : "link"} size={15} /> {f.bankConnected ? "Connected" : "Connect"}
              </button>
            </div>

            <div className="afa-bankrow">
              <div className="afa-bankrow-l">
                <span className="afa-bankrow-ic"><Icon name="file-text" size={20} /></span>
                <div><div className="afa-bankrow-t">Attach 4 months of bank statements</div><div className="afa-bankrow-s">PDF or image · or skip and add later</div></div>
              </div>
              <button className={`dchip ${f.stmtsUploaded ? "" : "ghost"}`} onClick={() => set("stmtsUploaded", f.stmtsUploaded ? 0 : 4)}>
                <Icon name={f.stmtsUploaded ? "check" : "upload"} size={15} /> {f.stmtsUploaded ? f.stmtsUploaded + " attached" : "Upload"}
              </button>
            </div>

            <div className="afa-skipnote">
              {(f.bankConnected || f.stmtsUploaded)
                ? <span className="afa-skip-ok"><Icon name="check" size={15} /> Great — this will speed up your offers.</span>
                : <span><Icon name="info" size={15} /> No bank info yet? That's okay — you can submit now and we'll prompt you to add it from your dashboard.</span>}
            </div>
          </div>
        )}

        {/* STEP 4 — AUTHORIZATION & SIGN */}
        {step === 4 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Authorization &amp; signature</h2>
            <p className="dapply-sub">Review and sign to submit your application.</p>

            <div className="afa-authbox">
              By signing, each of the above listed business and business owner/officer ("you") authorize Jacobs Family Advisors LLC and its representatives, successors, assigns and designees ("Recipients") to obtain consumer and/or personal, business and investigative reports — including from TransUnion, Experian and Equifax, and from other credit bureaus, banks, creditors and third parties — and to transmit this application with any such information to any of the Recipients. You also consent to recurring communications (text, email, phone), which may be automated, for application status, servicing, and marketing. Message &amp; data rates may apply; reply STOP to opt out.
            </div>

            <label className="afa-consent" onClick={() => set("consent", !f.consent)}>
              <span className={`dapply-box ${f.consent ? "on" : ""}`}>{f.consent && <Icon name="check" size={13} />}</span>
              <span>I have read and agree to the authorization above. <span className="dreq">★</span></span>
            </label>

            <div className="afa-grid">
              <AField label="Print name" req>{inp("printName", "Your full legal name")}</AField>
              <AField label="Date" req>{inp("date", "MM/DD/YYYY")}</AField>
            </div>

            <div className="afa-subh">Signature <span className="dreq">★</span></div>
            <button className={`dsign-pad ${f.signed ? "signed" : ""}`} onClick={() => set("signed", true)}>
              {f.signed ? <span className="dsign-done"><Icon name="check" size={18} /> Signed — {f.printName || (f.firstName + " " + f.lastName).trim() || "Applicant"}</span> : <span className="dsign-prompt"><Icon name="pen-line" size={18} /> Click to sign here</span>}
            </button>
            {show2nd && (
              <React.Fragment>
                <div className="afa-subh">2nd owner signature <span className="afa-opt">if applicable</span></div>
                <button className="dsign-pad"><span className="dsign-prompt"><Icon name="pen-line" size={18} /> 2nd owner signs here</span></button>
              </React.Fragment>
            )}
          </div>
        )}

        {/* DONE */}
        {step === 5 && (
          <div className="dapply-card center">
            <div className="dapply-success"><Icon name="check" size={30} /></div>
            <h2 className="dapply-h">Application submitted</h2>
            <p className="dapply-sub">Thanks{f.firstName ? ", " + f.firstName : ""} — your application is in{submissionRef ? " under reference " + submissionRef : ""}. Our team is reviewing it and matching you with funders. We'll email <strong>{f.email || "you"}</strong> as offers come in.</p>

            {!(f.bankConnected || f.stmtsUploaded) && (
              <div className="afa-finishbank">
                <div className="afa-finishbank-l"><Icon name="landmark" size={18} /><div><div className="afa-finishbank-t">One thing left to unlock more offers</div><div className="afa-finishbank-s">Add your bank or 4 months of statements — funders need it to fund.</div></div></div>
                <Button variant="accent" size="sm" iconRight="arrow-right" onClick={onClose}>Add from dashboard</Button>
              </div>
            )}

            <div className="dapply-timeline">
              {[
                ["Application received", "Now", true],
                ["Synced to our team", "Automatic", true],
                ["Matching with funders", "Within 24 hours", false],
                ["Offers land in your account", "1–2 business days", false],
              ].map(([t, w, done], i) => (
                <div key={i} className={`dapply-tl ${done ? "done" : ""}`}>
                  <span className="dapply-tldot">{done ? <Icon name="check" size={13} /> : i + 1}</span>
                  <span className="dapply-tlt">{t}</span><span className="dapply-tlw">{w}</span>
                </div>
              ))}
            </div>
            <Button variant="primary" iconRight="arrow-right" onClick={onClose}>Go to my dashboard</Button>
          </div>
        )}
      </main>

      {step < 5 && (
        <footer className="dapply-foot">
          {step > 0 ? <button className="dapply-back" onClick={() => setStep((s) => s - 1)}><Icon name="arrow-left" size={18} /> Back</button> : <button className="dapply-back" onClick={onClose}>Cancel</button>}
          <div className="afa-footright">
            {submitError && <span className="afa-hint" style={{ color: "#b42318", maxWidth: 260 }}>{submitError}</span>}
            {step === 3 && !(f.bankConnected || f.stmtsUploaded) && <button className="afa-skipbtn" onClick={() => setStep(4)}>Skip for now</button>}
            <Button variant="accent" size="lg" iconRight="arrow-right"
              onClick={step === 4 ? submitApplication : () => setStep((s) => s + 1)}
              style={{ opacity: canNext && !submitting ? 1 : 0.5, pointerEvents: canNext && !submitting ? "auto" : "none" }}>
              {submitting ? "Submitting..." : step === 4 ? "Submit application" : step === 3 ? "Continue" : !canNext ? "Complete required fields" : "Continue"}
            </Button>
          </div>
        </footer>
      )}
    </div>
  );
}
Object.assign(window, { FundingApplication });