const { SectionHead, Button, Field, ChipGroup, FormAlert, Icon } = window.CoolZoneSolutionDesignSystem_12e696;

const PC_YEAR_KWH = { old: 140, mid: 100, new: 70 };
const PC_CURRENCY_BY_LANG = { it: 'EUR', de: 'EUR', 'de-ch': 'CHF', pl: 'PLN' };
const PC_FUEL_PRICES = {
  CHF: { oil: 0.135, gas: 0.115, electric: 0.29, pellet: 0.095 },
  EUR: { oil: 0.12, gas: 0.11, electric: 0.32, pellet: 0.07 },
  PLN: { oil: 0.60, gas: 0.40, electric: 0.90, pellet: 0.35 },
};
const PC_ELECTRICITY_PRICE = { CHF: 0.29, EUR: 0.32, PLN: 0.90 };
const PC_COP = 3.6;

function ProjectCheck({ t, lang }) {
  const [building, setBuilding] = React.useState(null);
  const [area, setArea] = React.useState(140);
  const [year, setYear] = React.useState(null);
  const [fuel, setFuel] = React.useState(null);
  const [goal, setGoal] = React.useState(null);
  const [photo, setPhoto] = React.useState(null);
  const [contact, setContact] = React.useState({ name: '', email: '', phone: '', city: '' });
  const [tried, setTried] = React.useState(false);
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const currency = PC_CURRENCY_BY_LANG[lang.toLowerCase()] || 'EUR';
  const prices = PC_FUEL_PRICES[currency];
  const fmt = (n) => n.toLocaleString('de-CH', { maximumFractionDigits: 0 });

  const showSaving = goal && goal !== 'repair' && fuel && year;
  const demand = area * (PC_YEAR_KWH[year] || 100);
  const nowCost = fuel ? demand * prices[fuel] : 0;
  const pumpCost = (demand / PC_COP) * PC_ELECTRICITY_PRICE[currency];
  const saving = Math.max(0, Math.round((nowCost - pumpCost) / 10) * 10);

  const bad = {
    name: !contact.name.trim(),
    email: !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(contact.email),
    phone: contact.phone.trim().length < 6,
  };
  const setC = (k) => (e) => setContact({ ...contact, [k]: e.target.value });

  const onPhoto = (e) => {
    const f = e.target.files && e.target.files[0];
    if (f) setPhoto(f);
  };

  const submit = async (e) => {
    e.preventDefault();
    setTried(true);
    if (Object.values(bad).some(Boolean)) return;
    setStatus('sending');
    const fd = new FormData();
    fd.append('name', contact.name);
    fd.append('email', contact.email);
    fd.append('phone', contact.phone);
    fd.append('objectType', building || '');
    fd.append('area', String(area));
    fd.append('currentSystem', fuel || '');
    fd.append('timeline', goal || '');
    fd.append('problems', '[]');
    const noteParts = [`${t.pcCityLabel}: ${contact.city || '—'}`];
    if (showSaving) noteParts.push(`${t.pcLiveSavingLabel}: ${currency} ${fmt(saving)} ${t.pcLivePerYear}`);
    fd.append('notes', noteParts.join(' — '));
    if (photo) fd.append('photo', photo);
    try {
      const res = await fetch('/api/leads-api.php', { method: 'POST', body: fd });
      setStatus(res.ok ? 'sent' : 'error');
    } catch (err) {
      setStatus('error');
    }
  };

  if (status === 'sent') {
    return (
      <section className="section">
        <div className="container" style={{ maxWidth: '640px' }}>
          <FormAlert title={t.pcSuccessTitle} description={t.pcSuccessNote} />
        </div>
      </section>
    );
  }

  return (
    <section className="section">
      <div className="container">
        <SectionHead tag={t.pcEyebrow} title={t.pcTitle} body={t.pcLead} />
        <div className="pc-grid">
          <form className="pc-form" onSubmit={submit}>
            <ChipGroup label={t.pcBuildingLabel} options={t.qqBuildings.map((b) => ({ value: b, label: b }))} value={building} onChange={setBuilding} />

            <label className="sav-field">
              <span className="sav-lbl">{t.pcAreaLabel}<b className="sav-area">{area} m²</b></span>
              <input className="sav-range" type="range" min={50} max={400} step={10} value={area} onChange={(e) => setArea(Number(e.target.value))} />
            </label>

            <ChipGroup
              label={t.pcYearLabel}
              value={year}
              onChange={setYear}
              options={[
                { value: 'old', label: t.pcYearOld },
                { value: 'mid', label: t.pcYearMid },
                { value: 'new', label: t.pcYearNew },
              ]}
            />

            <ChipGroup label={t.savFuelLabel} value={fuel} onChange={setFuel} options={t.savFuels.map((f) => ({ value: f.id, label: f.label }))} />

            <ChipGroup
              label={t.pcGoalLabel}
              value={goal}
              onChange={setGoal}
              options={[
                { value: 'pump', label: t.pcGoalPump },
                { value: 'hybrid', label: t.pcGoalHybrid },
                { value: 'repair', label: t.pcGoalRepair },
              ]}
            />

            <div className="field">
              <span className="field-lb">{t.pcPhotoTitle}</span>
              <p style={{ font: 'var(--fw-regular) var(--fs-ui-sm)/1.5 var(--font-body)', color: 'var(--text-muted)', margin: '0 0 10px' }}>{t.pcPhotoNote}</p>
              {photo ? (
                <div className="pc-photo-chip">
                  <span>📷 {photo.name}</span>
                  <button type="button" className="qq-back" onClick={() => setPhoto(null)}>{t.pcPhotoRemove}</button>
                </div>
              ) : (
                <label className="pc-drop">
                  <input type="file" accept="image/*" onChange={onPhoto} />
                  {t.pcPhotoCta}
                </label>
              )}
            </div>

            <div className="field" style={{ marginTop: '10px', borderTop: '1px solid var(--border-default)', paddingTop: '22px' }}>
              <span className="field-lb" style={{ fontSize: '1rem', color: 'var(--text-strong)' }}>{t.pcContactTitle}</span>
              <p style={{ font: 'var(--fw-regular) var(--fs-ui-sm)/1.5 var(--font-body)', color: 'var(--text-muted)', margin: '4px 0 16px' }}>{t.pcContactLead}</p>
            </div>
            <Field id="pc-name" label={t.fName} placeholder={t.fNamePh} value={contact.name} onChange={setC('name')} invalid={tried && bad.name} error={t.fNameErr} />
            <div className="field-row">
              <Field id="pc-email" type="email" label={t.fEmail} placeholder={t.fEmailPh} value={contact.email} onChange={setC('email')} invalid={tried && bad.email} error={t.fEmailErr} />
              <Field id="pc-phone" type="tel" label={t.fPhone} placeholder={t.fPhonePh} value={contact.phone} onChange={setC('phone')} invalid={tried && bad.phone} error={t.fPhoneErr} />
            </div>
            <Field id="pc-city" label={t.pcCityLabel} placeholder={t.pcCityPh} value={contact.city} onChange={setC('city')} />

            <Button variant="primary" block icon="arrow" type="submit">{status === 'sending' ? '…' : t.pcSubmit}</Button>
            {status === 'error' && <p style={{ color: 'var(--danger-ink, #b42318)', fontSize: '.9rem', marginTop: '10px' }}>{t.pcErrorNote}</p>}
          </form>

          <div className="pc-live">
            <div className="sav-out" style={{ borderRadius: 'var(--radius-lg)' }}>
              <p className="sav-out-lbl">{t.pcLiveTitle}</p>
              {showSaving ? (
                <>
                  <p className="sav-big">{currency} {fmt(saving)}<span>{t.pcLivePerYear}</span></p>
                </>
              ) : goal === 'repair' ? (
                <p className="sav-ten">{t.pcLiveRepairNote}</p>
              ) : (
                <p className="sav-ten">{t.pcLiveWaiting}</p>
              )}
              <p className="sav-dis">{t.savDisclaimer}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ProjectCheck });