F-r-ldraledigplannerare/frontend/src/pages/Plan.tsx

import { ReactNode, useState } from 'react'
import { useWorkspace } from '@/context'
import { useLeaveWishes, usePlanProposal, useWorkspaceMembers, usePlanApply } from '@/hooks'
import type { LeaveWishCreateRequest, LeaveWishUpdateRequest } from '@/types'
import { useTranslation } from '@/i18n'
import { Layout } from '@/components/layout/Layout'
import { LoadingSpinner } from '@/components/common/LoadingSpinner'
import { WishEditor } from '@/components/planning/WishEditor'
import { PlanResults } from '@/components/planning/PlanResults'
import './plan.css'

export function Plan(): ReactNode {
  const { t } = useTranslation()
  const { workspace, isLoading: wsLoading } = useWorkspace()
  const workspaceId = workspace?.id ?? null
  const {
    data: wishes,
    isLoading: wishesLoading,
    add: addWish,
    update: updateWish,
    remove: removeWish,
  } = useLeaveWishes(workspaceId)
  const { data: members } = useWorkspaceMembers(workspaceId)
  const { data: proposal, isLoading: isProposing, error: proposalError, propose } =
    usePlanProposal(workspaceId)
  const { isLoading: isApplying, error: applyError, apply } = usePlanApply()

  const [isSaving, setIsSaving] = useState(false)
  const [wishError, setWishError] = useState<string | null>(null)

  const isLoading = wsLoading || wishesLoading

  if (isLoading) {
    return <LoadingSpinner message={t('plan.loading')} />
  }

  const handleAdd = (payload: LeaveWishCreateRequest) => {
    setWishError(null)
    setIsSaving(true)
    addWish(payload)
      .catch((err: unknown) => setWishError(err instanceof Error ? err.message : t('plan.addWishError')))
      .finally(() => setIsSaving(false))
  }

  const handleUpdate = (id: string, patch: LeaveWishUpdateRequest) => {
    setWishError(null)
    setIsSaving(true)
    updateWish(id, patch)
      .catch((err: unknown) => setWishError(err instanceof Error ? err.message : t('plan.updateWishError')))
      .finally(() => setIsSaving(false))
  }

  const handleRemove = (id: string) => {
    setWishError(null)
    setIsSaving(true)
    removeWish(id)
      .catch((err: unknown) => setWishError(err instanceof Error ? err.message : t('plan.removeWishError')))
      .finally(() => setIsSaving(false))
  }

  const handleApplyPlan = async (days: import('@/types').ProposedDayApplyItem[], replace: boolean) => {
    if (!workspaceId) throw new Error('Workspace not available')
    return apply(workspaceId, days, replace)
  }

  return (
    <Layout>
      <div data-testid="plan-page" className="plan-page">
        <h1>{t('plan.title')}</h1>
        <p className="plan-page__intro">{t('plan.intro')}</p>

        {wishError && (
          <div className="plan-page__error" role="alert" data-testid="wish-error">
            {wishError}
          </div>
        )}

        <section className="plan-page__section">
          <h2>{t('plan.wishesTitle')}</h2>
          {workspaceId && (
            <WishEditor
              workspaceId={workspaceId}
              wishes={wishes}
              members={members}
              isSaving={isSaving}
              onAdd={handleAdd}
              onUpdate={handleUpdate}
              onRemove={handleRemove}
            />
          )}
        </section>

        <section className="plan-page__section">
          <button
            type="button"
            onClick={() => void propose()}
            disabled={isProposing || wishes.length === 0}
            data-testid="propose-plan-button"
          >
            {isProposing ? t('plan.calculating') : t('plan.proposeButton')}
          </button>
          {wishes.length === 0 && (
            <p className="plan-page__help">{t('plan.addAtLeastOneWish')}</p>
          )}
          {proposalError && (
            <div className="plan-page__error" role="alert" data-testid="proposal-error">
              {proposalError}
            </div>
          )}
        </section>

        {applyError && (
          <div className="plan-page__error" role="alert" data-testid="apply-error">
            {applyError}
          </div>
        )}

        {proposal && (
          <PlanResults
            proposal={proposal}
            members={members}
            isApplying={isApplying}
            onApply={handleApplyPlan}
          />
        )}
      </div>
    </Layout>
  )
}