/* Transfer Plot module */
(function () {
  const { useState } = React;
  const Icon = window.Icon, PageHead = window.PageHead;
  const D = window.YEIDA, fmt = D.fmtINR;

  const STEPS = ['Eligibility', 'Requirements', 'Fee Calculator', 'Application', 'Review'];

  function Transfer({ go, toast }) {
    const [step, setStep] = useState(0);
    const feeTotal = D.transferFees.reduce((s, f) => s + f.amount, 0);

    return (
      <div>
        <PageHead title="Transfer Plot" subtitle="Transfer ownership of Plot B-47, Sector 18" />

        {/* progress */}
        <div className="card anim-fade-up" style={{ padding: '16px 24px', marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8, overflowX: 'auto' }}>
          {STEPS.map((s, i) => (
            <React.Fragment key={s}>
              <button onClick={() => setStep(i)} className="row gap-2" style={{ background: 'none', border: 'none', cursor: 'pointer', flex: 'none' }}>
                <span style={{ width: 30, height: 30, borderRadius: 99, display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13, background: i < step ? 'var(--emerald-500)' : i === step ? 'var(--blue-500)' : 'var(--bg-2)', color: i <= step ? '#fff' : 'var(--faint)' }}>{i < step ? <Icon name="check" size={15} /> : i + 1}</span>
                <span style={{ fontWeight: i === step ? 700 : 500, fontSize: 13.5, color: i === step ? 'var(--ink)' : 'var(--muted)' }}>{s}</span>
              </button>
              {i < STEPS.length - 1 && <span style={{ flex: 1, minWidth: 20, height: 2, background: i < step ? 'var(--emerald-500)' : 'var(--line)' }} />}
            </React.Fragment>
          ))}
        </div>

        <div key={step} className="anim-fade-up">
          {step === 0 && <Eligibility next={() => setStep(1)} />}
          {step === 1 && <Requirements />}
          {step === 2 && <FeeCalc fees={D.transferFees} total={feeTotal} />}
          {step === 3 && <Application />}
          {step === 4 && <Review total={feeTotal} go={go} toast={toast} />}
        </div>

        <div className="row spread" style={{ marginTop: 18 }}>
          <button className="btn btn-outline" disabled={step === 0} style={{ opacity: step === 0 ? .4 : 1 }} onClick={() => setStep(s => Math.max(0, s - 1))}><Icon name="chevL" size={17} />Back</button>
          {step < 4 && <button className="btn btn-primary" onClick={() => setStep(s => s + 1)}>Continue<Icon name="chevR" size={17} /></button>}
        </div>
      </div>
    );
  }

  function Eligibility({ next }) {
    const checks = [
      ['5-year lock-in period completed', true, 'Allotted Mar 2019 · 7 years held'],
      ['No outstanding transfer restrictions', true, 'Clear'],
      ['Lease deed registered', true, 'Registered Sep 2019'],
      ['Pending dues cleared before transfer', false, '₹1,47,585 to be cleared first'],
    ];
    const eligible = true;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>
        <div className="card card-pad">
          <h3 style={{ fontSize: 19, marginBottom: 4 }}>Eligibility Check</h3>
          <p className="muted" style={{ fontSize: 14, marginBottom: 18 }}>We verified your plot against transfer policy 2026.</p>
          <div className="col gap-2">
            {checks.map(([l, ok, note], i) => (
              <div key={i} className="row spread" style={{ padding: '13px 15px', borderRadius: 12, border: '1px solid var(--line)' }}>
                <div className="row gap-3">
                  <span style={{ color: ok ? 'var(--emerald-600)' : 'var(--amber-600)' }}><Icon name={ok ? 'checkCircle' : 'alert'} size={20} /></span>
                  <div><div style={{ fontWeight: 600, fontSize: 14 }}>{l}</div><div className="faint" style={{ fontSize: 12 }}>{note}</div></div>
                </div>
                <span className={'badge badge-' + (ok ? 'green' : 'amber')}>{ok ? 'Passed' : 'Action needed'}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card card-pad" style={{ background: 'linear-gradient(170deg,#0b2548,#081a39)', color: '#fff', alignSelf: 'start' }}>
          <span style={{ width: 56, height: 56, borderRadius: 14, display: 'grid', placeItems: 'center', background: 'var(--emerald-500)', color: '#fff', marginBottom: 16 }}><Icon name="check" size={28} /></span>
          <h3 style={{ color: '#fff', fontSize: 20 }}>You're eligible to transfer</h3>
          <p style={{ fontSize: 13.5, color: 'rgba(200,216,240,.8)', marginTop: 8, lineHeight: 1.55 }}>Your plot meets the core eligibility criteria. Clear pending dues to proceed to fee payment and application.</p>
          <button className="btn btn-emerald btn-block" style={{ marginTop: 18 }} onClick={next}>Proceed to Requirements<Icon name="arrowR" size={17} /></button>
        </div>
      </div>
    );
  }

  function Requirements() {
    const reqs = [
      ['Transferor (Seller) Documents', ['PAN & Aadhaar', 'Original allotment letter', 'Latest dues clearance', 'No-objection affidavit']],
      ['Transferee (Buyer) Documents', ['PAN & Aadhaar', 'Photographs (2)', 'Address proof', 'Acceptance undertaking']],
      ['Joint / Common', ['Registered transfer deed', 'Sale agreement', 'Stamp duty receipt', 'Transfer fee challan']],
    ];
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
        {reqs.map(([title, items], i) => (
          <div key={i} className="card card-pad">
            <h4 style={{ fontSize: 15.5, marginBottom: 14 }}>{title}</h4>
            <div className="col gap-3">
              {items.map(it => <div key={it} className="row gap-3" style={{ fontSize: 13.5, color: 'var(--ink-2)' }}><span style={{ width: 22, height: 22, borderRadius: 6, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--emerald-50)', color: 'var(--emerald-600)' }}><Icon name="check" size={13} /></span>{it}</div>)}
            </div>
          </div>
        ))}
      </div>
    );
  }

  function FeeCalc({ fees, total }) {
    const [value, setValue] = useState(7725000);
    const transfer = Math.round(value * 0.025);
    const computed = transfer + 5000 + 2500 + 1350;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        <div className="card card-pad">
          <h3 style={{ fontSize: 19, marginBottom: 14 }}>Fee Calculator</h3>
          <div className="field" style={{ marginBottom: 18 }}>
            <label>Declared Transfer Value</label>
            <div className="input-icon"><Icon name="rupee" /><input className="input num" type="number" value={value} onChange={e => setValue(+e.target.value || 0)} /></div>
            <input type="range" min={5000000} max={12000000} step={50000} value={value} onChange={e => setValue(+e.target.value)} style={{ accentColor: 'var(--blue-600)', marginTop: 10 }} />
            <div className="row spread faint" style={{ fontSize: 11.5 }}><span>₹50 L</span><span>₹1.2 Cr</span></div>
          </div>
          <div style={{ background: 'var(--blue-50)', borderRadius: 13, padding: '16px 18px' }}>
            <div className="muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Transfer Charges (2.5%)</div>
            <div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, color: 'var(--blue-600)', marginTop: 4 }}>{fmt(transfer)}</div>
          </div>
        </div>
        <div className="card card-pad">
          <h3 style={{ fontSize: 19, marginBottom: 14 }}>Fee Breakdown</h3>
          <div className="col">
            {[['Transfer Charges (2.5% of value)', transfer], ['Processing Fee', 5000], ['Documentation Charges', 2500], ['GST (18% on fees)', 1350]].map(([l, a], i) => (
              <div key={i} className="row spread" style={{ padding: '13px 0', borderBottom: '1px solid var(--line-2)' }}>
                <span className="muted" style={{ fontSize: 13.5 }}>{l}</span><span className="num" style={{ fontWeight: 700 }}>{fmt(a)}</span>
              </div>
            ))}
            <div className="row spread" style={{ padding: '16px 0 4px' }}>
              <span style={{ fontWeight: 800, fontSize: 16 }}>Total Payable</span>
              <span className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--emerald-700)' }}>{fmt(computed)}</span>
            </div>
          </div>
          <button className="btn btn-primary btn-block" style={{ marginTop: 16 }}><Icon name="receipt" size={17} />Generate Transfer Challan</button>
        </div>
      </div>
    );
  }

  function Application() {
    const fields = [
      ['Transferee Full Name', 'user', 'Enter buyer name'],
      ['Transferee Mobile', 'phone', '+91'],
      ['Transferee Email', 'mail', 'buyer@email.com'],
      ['Transferee PAN', 'file', 'ABCDE1234F'],
      ['Relationship to Transferor', 'user', 'e.g. Third party'],
      ['Reason for Transfer', 'info', 'e.g. Sale'],
    ];
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 18 }}>
        <div className="card card-pad">
          <h3 style={{ fontSize: 19, marginBottom: 16 }}>Transfer Application</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {fields.map(([l, ic, ph]) => (
              <div key={l} className="field"><label>{l}</label><div className="input-icon"><Icon name={ic} /><input className="input" placeholder={ph} /></div></div>
            ))}
          </div>
        </div>
        <div className="card card-pad">
          <h4 style={{ fontSize: 15.5, marginBottom: 14 }}>Upload Documents</h4>
          <div style={{ border: '2px dashed var(--blue-100)', borderRadius: 13, padding: '26px 16px', textAlign: 'center', background: 'var(--blue-50)', marginBottom: 16 }}>
            <Icon name="upload" size={26} style={{ color: 'var(--blue-600)' }} />
            <div style={{ fontWeight: 700, fontSize: 14, marginTop: 8 }}>Upload transfer deed & KYC</div>
            <div className="faint" style={{ fontSize: 12 }}>PDF · up to 25 MB</div>
          </div>
          {['Transfer Deed', 'Buyer KYC', 'Sale Agreement'].map(d => (
            <div key={d} className="row spread" style={{ padding: '10px 0', borderBottom: '1px solid var(--line-2)' }}>
              <span className="row gap-2" style={{ fontSize: 13.5 }}><Icon name="file" size={16} style={{ color: 'var(--muted)' }} />{d}</span>
              <button className="btn btn-outline btn-sm">Upload</button>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function Review({ total, go, toast }) {
    const [submitted, setSubmitted] = useState(false);
    if (submitted) return (
      <div className="card card-pad" style={{ textAlign: 'center', padding: '44px 30px' }}>
        <div style={{ width: 74, height: 74, borderRadius: 99, margin: '0 auto 16px', display: 'grid', placeItems: 'center', background: 'var(--emerald-500)', color: '#fff', boxShadow: '0 14px 30px -10px rgba(15,157,107,.6)' }} className="anim-pop"><Icon name="check" size={38} /></div>
        <h3 style={{ fontSize: 23 }}>Transfer application submitted</h3>
        <p className="muted" style={{ fontSize: 14.5, maxWidth: 460, margin: '10px auto 0', lineHeight: 1.6 }}>Application TR-2026-18-0472 is now with the Authority for review. You can track approval status from your dashboard.</p>
        <div className="row gap-3 center" style={{ marginTop: 22 }}><button className="btn btn-outline" onClick={() => go('dashboard')}>Go to Dashboard</button><button className="btn btn-primary" onClick={() => go('documents')}>View Documents</button></div>
      </div>
    );
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>
        <div className="card card-pad">
          <h3 style={{ fontSize: 19, marginBottom: 16 }}>Review & Submit</h3>
          {[['Plot', 'B-47, Sector 18'], ['Transferor', 'Rajeev Malhotra'], ['Transferee', 'New Allottee'], ['Transfer Value', fmt(7725000)], ['Total Fees', fmt(201975)], ['Documents', '3 uploaded']].map(([l, v]) => (
            <div key={l} className="row spread" style={{ padding: '13px 0', borderBottom: '1px solid var(--line-2)' }}><span className="muted" style={{ fontSize: 13.5 }}>{l}</span><span style={{ fontWeight: 700, fontSize: 14 }}>{v}</span></div>
          ))}
          <label className="row gap-3" style={{ marginTop: 16, fontSize: 13, color: 'var(--muted)', cursor: 'pointer' }}><input type="checkbox" defaultChecked style={{ width: 17, height: 17, accentColor: 'var(--blue-600)' }} />I declare the above information is true and complete.</label>
        </div>
        <div className="card card-pad" style={{ alignSelf: 'start', background: 'var(--bg)' }}>
          <h4 style={{ fontSize: 15.5, marginBottom: 6 }}>Approval Tracking</h4>
          <p className="muted" style={{ fontSize: 13, marginBottom: 16 }}>After submission your application moves through:</p>
          {['Document verification', 'Dues clearance check', 'Authority approval', 'Transfer completion'].map((s, i) => (
            <div key={s} className="row gap-3" style={{ padding: '8px 0', fontSize: 13.5 }}><span style={{ width: 24, height: 24, borderRadius: 99, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--bg-2)', color: 'var(--faint)', fontWeight: 700, fontSize: 12 }}>{i + 1}</span>{s}</div>
          ))}
          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 16 }} onClick={() => { setSubmitted(true); toast && toast('Transfer application submitted'); }}>Submit Application</button>
        </div>
      </div>
    );
  }

  window.Transfer = Transfer;
})();