go-guess/frontend/src/features/interviews/pages.tsx

import { Check, UsersRound, X } from 'lucide-react'
import { type FormEvent, useEffect, useMemo, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { api, ApiError } from '../../api/client'
import type { ParticipantMeeting, ScheduledInterview } from '../../types'
import { ErrorAlert, Loading } from '../../components/ui/AsyncState'
import { DateAndPlace, InterviewCard } from './components/InterviewCard'

function message(error: unknown) {
  return error instanceof ApiError || error instanceof Error
    ? error.message
    : 'Something went wrong'
}

export function InboxPage() {
  const [items, setItems] = useState<ScheduledInterview[]>([])
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    void api.inbox
      .list()
      .then(setItems)
      .catch((value) => setError(message(value)))
      .finally(() => setLoading(false))
  }, [])

  async function respond(id: number, status: 'accepted' | 'declined') {
    setError('')
    try {
      const updated = await api.inbox.respond(id, status)
      setItems((current) => current.map((item) => (item.id === id ? updated : item)))
    } catch (value) {
      setError(message(value))
    }
  }

  return (
    <>
      <header className="page-header">
        <div>
          <span className="eyebrow">Invitations</span>
          <h1>Inbox</h1>
          <p>Respond to interview invitations assigned to you.</p>
        </div>
      </header>
      {error && <ErrorAlert error={error} />}
      {loading ? (
        <Loading />
      ) : (
        <section className="meeting-list">
          {items.map((item) => (
            <InterviewCard interview={item} key={item.id}>
              <div className="meeting-actions">
                <button
                  className="button primary"
                  type="button"
                  onClick={() => void respond(item.id, 'accepted')}
                >
                  <Check size={17} /> Accept
                </button>
                <button
                  className="button secondary danger"
                  type="button"
                  onClick={() => void respond(item.id, 'declined')}
                >
                  <X size={17} /> Decline
                </button>
              </div>
            </InterviewCard>
          ))}
          {!items.length && (
            <div className="card empty-state">
              <h3>Inbox zero</h3>
              <p>You have no interview invitations.</p>
            </div>
          )}
        </section>
      )}
    </>
  )
}

export function CalendarPage() {
  const [items, setItems] = useState<ScheduledInterview[]>([])
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    void api
      .calendar()
      .then(setItems)
      .catch((value) => setError(message(value)))
      .finally(() => setLoading(false))
  }, [])
  const groups = useMemo(() => {
    return [...items]
      .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
      .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
        const key = new Date(item.startsAt).toLocaleDateString(undefined, {
          weekday: 'long',
          month: 'long',
          day: 'numeric',
          year: 'numeric',
        })
        ;(result[key] ??= []).push(item)
        return result
      }, {})
  }, [items])
  return (
    <>
      <header className="page-header">
        <div>
          <span className="eyebrow">Schedule</span>
          <h1>Calendar</h1>
          <p>Your accepted and organized interviews, grouped by date.</p>
        </div>
      </header>
      {error && <ErrorAlert error={error} />}
      {loading ? (
        <Loading />
      ) : (
        Object.entries(groups).map(([date, interviews]) => (
          <section className="calendar-day" key={date}>
            <h2>{date}</h2>
            <div className="meeting-list">
              {interviews.map((item) => (
                <InterviewCard interview={item} key={item.id}>
                  <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
                    Open session
                  </Link>
                </InterviewCard>
              ))}
            </div>
          </section>
        ))
      )}
    </>
  )
}

export function ScheduledInterviewPage() {
  const id = Number(useParams().id)
  const [interview, setInterview] = useState<ScheduledInterview>()
  const [document, setDocument] = useState('')
  const [notes, setNotes] = useState<ScheduledInterview['notes']>([])
  const [error, setError] = useState('')
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    let active = true
    void Promise.all([api.scheduledInterviews.get(id), api.scheduledInterviews.notes(id)])
      .then(([item, loadedNotes]) => {
        if (!active) return
        setInterview(item)
        setDocument(item.sharedDocument)
        setNotes(loadedNotes)
      })
      .catch((value) => active && setError(message(value)))
    return () => {
      active = false
    }
  }, [id])

  useEffect(() => {
    if (interview?.status !== 'started') return
    const controller = new AbortController()
    void api.scheduledInterviews
      .subscribe(
        id,
        (note) => {
          setNotes((current) =>
            current.some((item) => item.id === note.id) ? current : [...current, note],
          )
        },
        controller.signal,
      )
      .catch((value) => {
        if (!controller.signal.aborted) setError(message(value))
      })
    return () => controller.abort()
  }, [id, interview?.status])

  async function setStatus(status: string) {
    setError('')
    try {
      setInterview(await api.scheduledInterviews.setStatus(id, status))
    } catch (value) {
      setError(message(value))
    }
  }

  async function saveDocument(event: FormEvent) {
    event.preventDefault()
    setSaving(true)
    setError('')
    try {
      setInterview(await api.scheduledInterviews.updateDocument(id, document))
    } catch (value) {
      setError(message(value))
    } finally {
      setSaving(false)
    }
  }

  async function addNote(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const form = event.currentTarget
    const body = String(new FormData(form).get('body')).trim()
    if (!body) return
    try {
      const note = await api.scheduledInterviews.addNote(id, body)
      setNotes((current) =>
        current.some((item) => item.id === note.id) ? current : [...current, note],
      )
      form.reset()
    } catch (value) {
      setError(message(value))
    }
  }

  if (!interview && !error) return <Loading />
  if (!interview) return <ErrorAlert error={error} />
  return (
    <>
      <Link className="back-link" to="/calendar">
        ← Calendar
      </Link>
      <header className="page-header">
        <div>
          <span className="eyebrow">Interviewer session</span>
          <h1>{interview.participantName}</h1>
          <p>{interview.jobTitle}</p>
        </div>
        <span className={`status status-${interview.status}`}>{interview.status}</span>
      </header>
      {error && <ErrorAlert error={error} />}
      <DateAndPlace interview={interview} />
      <div className="session-actions">
        {interview.status !== 'started' && interview.status !== 'completed' && (
          <button
            className="button primary"
            type="button"
            onClick={() => void setStatus('started')}
          >
            Start interview
          </button>
        )}
        {interview.status === 'started' && (
          <button
            className="button primary"
            type="button"
            onClick={() => void setStatus('completed')}
          >
            Complete interview
          </button>
        )}
      </div>
      <div className="session-grid">
        <form className="card shared-document" onSubmit={saveDocument}>
          <div className="section-heading">
            <div>
              <span className="eyebrow">Visible to candidate</span>
              <h2>Shared documentation</h2>
            </div>
          </div>
          <div className="form-section">
            <textarea
              aria-label="Shared documentation"
              rows={18}
              value={document}
              onChange={(event) => setDocument(event.target.value)}
            />
            <button className="button primary" type="submit" disabled={saving}>
              {saving ? 'Saving…' : 'Save shared documentation'}
            </button>
          </div>
        </form>
        <section className="card notes-panel">
          <div className="section-heading">
            <div>
              <span className="eyebrow">Interviewers only</span>
              <h2>Live notes</h2>
            </div>
          </div>
          <div className="notes-list" aria-live="polite">
            {notes.map((note) => (
              <article className="note" key={note.id}>
                <strong>{note.authorName}</strong>
                <time>{new Date(note.createdAt).toLocaleTimeString()}</time>
                <p>{note.body}</p>
              </article>
            ))}
          </div>
          {interview.status === 'started' ? (
            <form className="note-form" onSubmit={addNote}>
              <label className="sr-only" htmlFor="interview-note">
                Add a note
              </label>
              <textarea
                id="interview-note"
                name="body"
                rows={3}
                required
                placeholder="Add a private interviewer note…"
              />
              <button className="button primary" type="submit">
                Post note
              </button>
            </form>
          ) : (
            <p className="panel-padding muted">
              Notes can be added while the interview is started.
            </p>
          )}
        </section>
      </div>
      <section className="card attendee-section">
        <div className="section-heading">
          <div>
            <h2>Attendees</h2>
            <p>Interview team and response status.</p>
          </div>
        </div>
        <div className="user-list">
          {interview.attendees.map((attendee) => (
            <article className="user-row" key={attendee.userId}>
              <UsersRound />
              <div>
                <strong>{attendee.displayName}</strong>
                <small>{attendee.email}</small>
              </div>
              <span className={`status status-${attendee.status}`}>{attendee.status}</span>
            </article>
          ))}
        </div>
      </section>
    </>
  )
}

export function ParticipantMeetingPage() {
  const token = useParams().token ?? ''
  const [meeting, setMeeting] = useState<ParticipantMeeting>()
  const [error, setError] = useState('')
  useEffect(() => {
    void api.participantMeetings
      .get(token)
      .then(setMeeting)
      .catch((value) => setError(message(value)))
  }, [token])
  return (
    <main className="public-interview">
      <header>
        <Link className="logo" to="/" aria-label="Go Guess home">
          <span className="logo-mark">G</span>
          <span>
            <strong>GO GUESS</strong>
            <small>Talent workspace</small>
          </span>
        </Link>
      </header>
      {!meeting && !error && (
        <section className="interview-card">
          <Loading />
        </section>
      )}
      {error && (
        <section className="interview-card">
          <ErrorAlert error={error} />
        </section>
      )}
      {meeting && (
        <section className="interview-card meeting-public-card">
          <span className="eyebrow">Your scheduled interview</span>
          <h1>{meeting.jobTitle}</h1>
          <p>Welcome, {meeting.participantName}.</p>
          <span className={`status status-${meeting.status}`}>{meeting.status}</span>
          <DateAndPlace interview={meeting} />
          <section className="public-document" aria-labelledby="shared-document-title">
            <h2 id="shared-document-title">Shared documentation</h2>
            <div>{meeting.sharedDocument || 'No shared documentation has been added yet.'}</div>
          </section>
        </section>
      )}
    </main>
  )
}