/* global React, Icon, Linkify, apiGet, apiPost */

const { useState, useEffect } = React;

// Full-page recipient view for a response-request notification (kind='form').
// Reached via the #respond/<notificationId> hash (see index.html). Loads the form
// definition + the user's prior answers, renders the fields, and submits to
// POST /api/notifications/:id/respond. See tasks/response-request-notifications.md.
function RespondPage({ notificationId, currentUser, onExit }) {
  const [phase, setPhase] = useState('loading'); // loading | ready | done | error
  const [notification, setNotification] = useState(null);
  const [answers, setAnswers] = useState({});
  const [error, setError] = useState('');
  const [fieldErrors, setFieldErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    let cancelled = false;
    apiGet(`/api/notifications/${encodeURIComponent(notificationId)}/respond`)
      .then((data) => {
        if (cancelled) return;
        setNotification(data.notification);
        setAnswers(data.response?.answers || {});
        setPhase('ready');
      })
      .catch((err) => {
        if (cancelled) return;
        setError(err.message || 'Could not load this form.');
        setPhase('error');
      });
    return () => { cancelled = true; };
  }, [notificationId]);

  const fields = notification?.formSchema || [];
  const alreadyResponded = phase === 'ready' && Object.keys(answers).length > 0;

  const setField = (id, value) => {
    setAnswers((prev) => ({ ...prev, [id]: value }));
    setFieldErrors((prev) => (prev[id] ? { ...prev, [id]: undefined } : prev));
  };

  const toggleMulti = (id, option) => {
    setAnswers((prev) => {
      const current = Array.isArray(prev[id]) ? prev[id] : [];
      const next = current.includes(option)
        ? current.filter((o) => o !== option)
        : [...current, option];
      return { ...prev, [id]: next };
    });
    setFieldErrors((prev) => (prev[id] ? { ...prev, [id]: undefined } : prev));
  };

  const isBlank = (field) => {
    const v = answers[field.id];
    if (field.type === 'multi_choice') return !Array.isArray(v) || v.length === 0;
    return v == null || String(v).trim() === '';
  };

  const submit = () => {
    const errs = {};
    fields.forEach((f) => { if (f.required && isBlank(f)) errs[f.id] = 'This field is required.'; });
    if (Object.keys(errs).length > 0) {
      setFieldErrors(errs);
      return;
    }
    setSubmitting(true);
    setError('');
    apiPost(`/api/notifications/${encodeURIComponent(notificationId)}/respond`, { answers })
      .then(() => setPhase('done'))
      .catch((err) => setError(err.message || 'Could not submit your response.'))
      .finally(() => setSubmitting(false));
  };

  // Plain helper, NOT a component rendered via <Shell/> — defining a component
  // inside this one would give it a new identity each render and remount (and
  // unfocus) the form inputs on every keystroke.
  const shell = (children) => (
    <main className="app-main respond-main">
      <button type="button" className="linklike" onClick={onExit} style={{ marginBottom: 16 }}>
        <Icon name="chevron-left" size={14}/> Back to dashboard
      </button>
      {children}
    </main>
  );

  if (phase === 'loading') {
    return shell(<div className="card" style={{ padding: 24 }}><div className="muted">Loading form…</div></div>);
  }

  if (phase === 'error') {
    return shell(
      <div className="card" style={{ padding: 24 }}>
        <div className="page-eyebrow">Response form</div>
        <h1 className="section-title" style={{ marginTop: 8 }}>Unavailable</h1>
        <div className="form-error" style={{ marginTop: 12 }}>{error}</div>
      </div>
    );
  }

  if (phase === 'done') {
    return shell(
      <>
        <div className="card" style={{ padding: 24, textAlign: 'center' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 44, height: 44, borderRadius: 999, background: 'var(--coral-100)', color: 'var(--coral-700)',
          }}><Icon name="check" size={22}/></span>
          <h1 className="section-title" style={{ marginTop: 14 }}>Response recorded</h1>
          <div className="muted wrap-anywhere" style={{ fontSize: 13, marginTop: 8, lineHeight: 1.6 }}>
            Thanks{currentUser?.name ? `, ${currentUser.name.split(' ')[0]}` : ''} — your answer to
            “{notification.title}” has been saved. You can update it any time from the bell.
          </div>
          <div className="row" style={{ justifyContent: 'center', gap: 8, marginTop: 20 }}>
            <button type="button" className="btn btn-ghost" onClick={onExit}>Done</button>
            <button type="button" className="btn btn-primary" onClick={() => setPhase('ready')}>
              <Icon name="edit" size={13}/> Edit response
            </button>
          </div>
        </div>
      </>
    );
  }

  return shell(
    <div className="card" style={{ padding: 24 }}>
      <div className="page-eyebrow">Cornell Generative AI · Respond</div>
        <h1 className="section-title wrap-anywhere" style={{ marginTop: 8, fontSize: 26 }}>{notification.title}</h1>
        {notification.body && (
          <div className="muted wrap-anywhere" style={{ fontSize: 13.5, lineHeight: 1.6, marginTop: 10, whiteSpace: 'pre-wrap' }}>
            <Linkify text={notification.body}/>
          </div>
        )}
        {alreadyResponded && (
          <div style={{ fontSize: 12.5, color: 'var(--coral-700)', marginTop: 12 }}>
            You've already responded — submitting again updates your answer.
          </div>
        )}

        <div style={{ display: 'grid', gap: 18, marginTop: 22 }}>
          {fields.map((field) => (
            <div key={field.id} className="field">
              <div className="field-label wrap-anywhere" style={{ marginBottom: 8 }}>
                {field.label}{field.required && <span style={{ color: 'var(--coral-600)' }}> *</span>}
              </div>

              {field.type === 'short_text' && (
                <input className="input" value={answers[field.id] || ''}
                  onChange={(e) => setField(field.id, e.target.value)}/>
              )}

              {field.type === 'long_text' && (
                <textarea className="input" rows={4} value={answers[field.id] || ''}
                  onChange={(e) => setField(field.id, e.target.value)}
                  style={{ resize: 'vertical', fontFamily: 'inherit', lineHeight: 1.5 }}/>
              )}

              {field.type === 'single_choice' && (
                <div style={{ display: 'grid', gap: 8 }}>
                  {field.options.map((opt) => (
                    <label key={opt} className="row" style={{ gap: 8, cursor: 'pointer', margin: 0, fontSize: 13.5 }}>
                      <input type="radio" name={field.id} checked={answers[field.id] === opt}
                        onChange={() => setField(field.id, opt)}/>
                      <span className="wrap-anywhere">{opt}</span>
                    </label>
                  ))}
                </div>
              )}

              {field.type === 'multi_choice' && (
                <div style={{ display: 'grid', gap: 8 }}>
                  {field.options.map((opt) => {
                    const checked = Array.isArray(answers[field.id]) && answers[field.id].includes(opt);
                    return (
                      <label key={opt} className="row" style={{ gap: 8, cursor: 'pointer', margin: 0, fontSize: 13.5 }}>
                        <input type="checkbox" checked={checked} onChange={() => toggleMulti(field.id, opt)}/>
                        <span className="wrap-anywhere">{opt}</span>
                      </label>
                    );
                  })}
                </div>
              )}

              {fieldErrors[field.id] && (
                <div className="form-error" style={{ fontSize: 12, marginTop: 6 }}>{fieldErrors[field.id]}</div>
              )}
            </div>
          ))}
        </div>

        {error && <div className="form-error" style={{ marginTop: 16 }}>{error}</div>}

        <div className="row" style={{ justifyContent: 'flex-end', gap: 8, marginTop: 22 }}>
          <button type="button" className="btn btn-ghost" onClick={onExit}>Cancel</button>
          <button type="button" className="btn btn-primary" onClick={submit} disabled={submitting}>
            {submitting ? 'Submitting…' : alreadyResponded ? 'Update response' : 'Submit response'}
          </button>
        </div>
      </div>
  );
}

window.RespondPage = RespondPage;