const { Button, EyebrowLabel, Icon, Badge } = window.YUANJIEDesignSystem_590ef9;
const DEMO_ENDPOINT = 'https://yj-mcs-notify.f90865.workers.dev/';
const FIELD_KEYS = ['company', 'name', 'email', 'fleet'];

function DemoModal({ open, onClose }) {
  const c = useCopy();
  const [sent, setSent] = React.useState(false);
  const [shown, setShown] = React.useState(false);
  const [values, setValues] = React.useState({ company: '', name: '', email: '', fleet: '' });
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  React.useEffect(() => { if (open) { setSent(false); const id = requestAnimationFrame(() => setShown(true)); return () => { cancelAnimationFrame(id); setShown(false); }; } }, [open]);
  const submit = async () => {
    if (!values.company || !values.name || !values.email) {
      setError(c.modal.required);
      return;
    }
    setSubmitting(true);
    setError('');
    try {
      const response = await fetch(DEMO_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values)
      });
      if (!response.ok) throw new Error('Request failed');
      setSent(true);
    } catch (err) {
      setError(c.modal.error);
    } finally {
      setSubmitting(false);
    }
  };
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(18,18,18,0.35)', backdropFilter: 'blur(2px)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', opacity: shown ? 1 : 0, transition: 'opacity var(--duration-base) var(--ease-standard)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: '520px', maxWidth: '100%', background: 'var(--color-paper-white)', border: '1px solid var(--color-ash-gray)', borderRadius: 'var(--radius-cards)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', opacity: shown ? 1 : 0, transform: shown ? 'none' : 'translateY(10px) scale(0.985)', transition: 'opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo)' }}>
        <div style={{ height: '3px', background: 'var(--gradient-marigold)' }} />
        <div style={{ padding: '28px', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-20)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
            <div>
              <EyebrowLabel>{c.modal.eyebrow}</EyebrowLabel>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 100, fontSize: '34px', letterSpacing: '-0.03em', marginTop: '8px' }}>{sent ? c.modal.sentTitle : c.modal.title}</div>
            </div>
            <button onClick={onClose} aria-label={c.modal.close} style={{ background: 'none', border: 0, cursor: 'pointer', padding: '4px', color: 'var(--color-graphite)', fontSize: '18px', lineHeight: 1 }}>×</button>
          </div>
          {sent ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <p style={{ margin: 0, fontSize: '15px', lineHeight: 1.8, color: 'var(--color-graphite)' }}>{c.modal.sentBody}</p>
              <div><Badge tone="green">{c.modal.received}</Badge></div>
              <Button variant="ghost" onClick={onClose}>{c.modal.close}</Button>
            </div>
          ) : (
            <React.Fragment>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-14)' }}>
                {c.modal.fields.map(([label, ph], i) => (
                  <label key={label} style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                    <span style={{ fontFamily: 'var(--font-ui)', fontSize: '11px', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--color-graphite)' }}>{label}</span>
                    <input type={FIELD_KEYS[i] === 'email' ? 'email' : 'text'} required={i < 3} value={values[FIELD_KEYS[i]]} onChange={(e) => setValues((current) => ({ ...current, [FIELD_KEYS[i]]: e.target.value }))} placeholder={ph} style={{ fontFamily: 'var(--font-body)', fontSize: '14px', padding: '10px 12px', border: '1px solid var(--color-ash-gray)', borderRadius: 'var(--radius-md)', background: 'var(--color-paper-white)', color: 'var(--color-carbon)', outlineColor: 'var(--color-iris-blue)' }} />
                  </label>
                ))}
              </div>
              {error ? <p role="alert" style={{ margin: 0, color: 'var(--color-coral)', fontSize: '13px' }}>{error}</p> : null}
              <div style={{ display: 'flex', gap: 'var(--spacing-12)', alignItems: 'center' }}>
                <Button variant="filled" disabled={submitting} onClick={submit} trailing={<Icon name="arrowRight" size={14} />}>{submitting ? c.modal.sending : c.modal.submit}</Button>
                <Button variant="quiet" onClick={onClose}>{c.modal.cancel}</Button>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DemoModal });