// InputScreen — the main data-entry view.
const { SectionTitle, Slider, CurrencyInput, PresetChips, Button, Card } =
  window.HappyRetirementDesignSystem_d542ec;

function FilledOrEmpty({ filled, value, color, onClick, label, btn }) {
  return (
    <div>
      <div className="field-label">{label}</div>
      {filled ? (
        <div className="filled-box" style={{ borderColor: color }}>
          <div className="filled-box__value" style={{ color }}>
            ฿{window.fmtTH(value)}
          </div>
        </div>
      ) : (
        <div className="empty-box">ยังไม่ได้กรอก (ไม่บังคับ)</div>
      )}
      <Button block size="sm" onClick={onClick} style={{ background: color, borderColor: color }}>
        {btn}
      </Button>
    </div>
  );
}

function InputScreen({ form, set, onCalculate, goTab }) {
  const fmt = window.fmtTH;
  return (
    <div>
      <SectionTitle style={{ marginTop: 0 }}>ข้อมูลส่วนตัว</SectionTitle>
      <div className="grid-2">
        <Slider label="อายุปัจจุบัน" value={form.currentAge} min={20} max={70} unit="ปี"
          onChange={(v) => set("currentAge", Math.round(v))} />
        <Slider label="อายุเกษียณ" value={form.retireAge} min={40} max={75} unit="ปี"
          onChange={(v) => set("retireAge", Math.round(v))} />
        <Slider label="อายุขัยที่คาดไว้" value={form.lifeExpectancy} min={60} max={100} unit="ปี"
          onChange={(v) => set("lifeExpectancy", Math.round(v))} />
      </div>

      <SectionTitle>รายได้และการออม</SectionTitle>
      <div className="grid-2">
        {/* Income — button to sub-calc */}
        <div>
          <div className="field-label">รายได้ต่อเดือน</div>
          {form.monthlyIncome > 0 ? (
            <div className="filled-box" style={{ borderColor: "var(--clay-600)", marginBottom: 8 }}>
              <div className="filled-box__value" style={{ color: "var(--clay-600)" }}>
                ฿{fmt(form.monthlyIncome)}/เดือน
              </div>
            </div>
          ) : (
            <div className="empty-box" style={{ marginBottom: 8 }}>ยังไม่ได้กรอก (ไม่บังคับ)</div>
          )}
          <Button block size="sm" onClick={() => goTab("income")}>💰 กรอกข้อมูลรายได้</Button>
        </div>

        <Slider label="อัตราการออม" value={form.monthlySavingRate} min={0} max={80} unit="%"
          note={`= ฿${fmt(Math.round(form.monthlyIncome * form.monthlySavingRate / 100))}/เดือน`}
          onChange={(v) => set("monthlySavingRate", v)} />

        <div>
          <div className="field-label">เงินออมปัจจุบัน</div>
          <CurrencyInput value={form.currentSavings} onChange={(v) => set("currentSavings", v)} />
          <div style={{ height: 8 }}></div>
          <PresetChips options={[0, 100000, 500000, 1000000, 2000000]} value={form.currentSavings}
            format={fmt} onChange={(v) => set("currentSavings", v)} />
        </div>

        <div>
          <div className="field-label">รายจ่ายหลังเกษียณ/เดือน <span className="muted">(Lifestyle)</span></div>
          <CurrencyInput value={form.retireMonthlyExpense} onChange={(v) => set("retireMonthlyExpense", v)} />
          <div style={{ height: 8 }}></div>
          <PresetChips options={[10000, 20000, 30000, 50000, 80000]} value={form.retireMonthlyExpense}
            format={fmt} onChange={(v) => set("retireMonthlyExpense", v)} />
        </div>
      </div>

      <SectionTitle>การลงทุน</SectionTitle>
      <div className="grid-2">
        <Slider label="ผลตอบแทนก่อนเกษียณ" value={form.expectedReturn} min={0} max={20} step={0.5}
          unit="% ต่อปี" note="(การลงทุนเพื่อสร้างผลตอบแทน)" onChange={(v) => set("expectedReturn", v)} />
        <Slider label="ผลตอบแทนหลังเกษียณ" value={form.retireReturn} min={0} max={20} step={0.5}
          unit="% ต่อปี" note="(รักษาพอร์ทหลังเกษียณ)" onChange={(v) => set("retireReturn", v)} />
        <Slider label="อัตราเงินเฟ้อ" value={form.inflationRate} min={0} max={10} step={0.5}
          unit="% ต่อปี" onChange={(v) => set("inflationRate", v)} />
      </div>

      {/* Lump-sum section */}
      <Card flat style={{ background: "rgba(212,168,67,0.06)", borderColor: "rgba(212,168,67,0.25)", marginTop: 20 }}>
        <SectionTitle color="var(--gold-600)" style={{ marginTop: 0 }}>เงินก้อนเมื่อเกษียณ</SectionTitle>
        <div className="grid-3" style={{ marginTop: 14 }}>
          <FilledOrEmpty filled={form.otherLumpsum > 0} value={form.otherLumpsum} color="var(--blue-600)"
            label="สินทรัพย์และการลงทุน" btn="📊 กรอกสินทรัพย์" onClick={() => goTab("assets")} />
          <FilledOrEmpty filled={form.providentFund > 0} value={form.providentFund} color="var(--gold-600)"
            label="กองทุนสำรองเลี้ยงชีพ" btn="🧮 คำนวณ PVD" onClick={() => goTab("pvd")} />
          <FilledOrEmpty filled={form.severancePay > 0} value={form.severancePay} color="var(--clay-600)"
            label="เงินชดเชย" btn="🧮 คำนวณ" onClick={() => goTab("severance")} />
        </div>
      </Card>

      {/* Passive income after retirement */}
      <Card flat style={{ background: "linear-gradient(135deg,rgba(42,157,143,0.06),rgba(46,191,175,0.04))", borderColor: "rgba(42,157,143,0.30)", borderWidth: 2, marginTop: 16, borderRadius: "var(--radius-2xl)" }}>
        <SectionTitle color="var(--color-passive)" style={{ marginTop: 0 }}>รายรับรายเดือนหลังเกษียณ</SectionTitle>
        <div className="grid-2" style={{ marginTop: 14 }}>
          {/* SSO — button to sub-calc */}
          <div>
            <div className="field-label">ประกันสังคม ชราภาพ</div>
            {form.monthlySSOPension > 0 ? (
              <div className="filled-box" style={{ borderColor: "var(--teal-500)", marginBottom: 8 }}>
                <div className="filled-box__value" style={{ color: "var(--teal-500)" }}>
                  ฿{fmt(form.monthlySSOPension)}/เดือน
                </div>
              </div>
            ) : (
              <div className="empty-box" style={{ marginBottom: 8 }}>ยังไม่ได้คำนวณ (ไม่บังคับ)</div>
            )}
            <Button block size="sm" onClick={() => goTab("sso")}
              style={{ background: "var(--teal-500)", borderColor: "var(--teal-500)" }}>
              🧮 คำนวณประกันสังคม
            </Button>
          </div>

          <Slider label="บำนาญ/เดือน" value={form.monthlyPension} min={0} max={100000} step={500}
            unit="บาท" format={fmt}
            onChange={(v) => set("monthlyPension", v)} />

          <Slider label="ประกันบำนาญ/เดือน" value={form.monthlyInsurancePension} min={0} max={100000} step={500}
            unit="บาท" format={fmt}
            onChange={(v) => set("monthlyInsurancePension", v)} />

          {(form.monthlyPension + form.monthlySSOPension + form.monthlyInsurancePension) > 0 && (
            <div>
              <div className="field-label">รวมรายรับ/เดือน</div>
              <Card accent="var(--color-passive)" flat>
                <div className="hr-stat__value" style={{ color: "var(--color-passive)", fontSize: 22 }}>
                  ฿{fmt(form.monthlyPension + form.monthlySSOPension + form.monthlyInsurancePension)}
                </div>
                <div className="hr-stat__sub">ต่อเดือน หลังเกษียณ</div>
              </Card>
            </div>
          )}
        </div>
      </Card>

      <Button block size="lg" icon="🔍" onClick={onCalculate} style={{ marginTop: 26 }}>
        คำนวณแผนเกษียณ
      </Button>
    </div>
  );
}

window.InputScreen = InputScreen;