Scrum4Me/components/notifications/notifications-sheet.tsx

'use client'

// ST-1105: Slide-over (rechts) met de lijst van openstaande Claude-vragen (M11).
//
// Story-assignee = currentUser krijgt een primary-container accent ("voor jou").
// Klik op een item opent de AnswerModal voor die specifieke vraag. Sheet blijft
// open na een succesvol antwoord zodat meerdere antwoorden achter elkaar kunnen.

import { useState } from 'react'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { useNotificationsStore } from '@/stores/notifications-store'
import { AnswerModal } from './answer-modal'
import { PushToggle } from './push-toggle'
import { cn } from '@/lib/utils'
import type { NotificationQuestion } from '@/stores/notifications-store'
import { debugProps } from '@/lib/debug'

interface NotificationsSheetProps {
  trigger: React.ReactNode
  currentUserId: string
  isDemo: boolean
}

export function NotificationsSheet({
  trigger,
  currentUserId,
  isDemo,
}: NotificationsSheetProps) {
  const [open, setOpen] = useState(false)
  const [activeQuestion, setActiveQuestion] = useState<NotificationQuestion | null>(null)
  const questions = useNotificationsStore((s) => s.questions)

  return (
    <>
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger render={trigger as React.ReactElement} />
        <SheetContent side="right" className="w-full sm:max-w-md" {...debugProps('notifications-sheet', 'NotificationsSheet', 'components/notifications/notifications-sheet.tsx')}>
          <SheetHeader data-debug-id="notifications-sheet__header">
            <SheetTitle>Vragen van Claude ({questions.length})</SheetTitle>
            <SheetDescription>
              Beantwoord open vragen om Claude verder te laten werken.
            </SheetDescription>
          </SheetHeader>

          {questions.length === 0 ? (
            <div className="text-muted-foreground mt-8 px-4 py-6 text-center text-sm">
              Geen openstaande vragen. Lekker bezig!
            </div>
          ) : (
            <ul className="mt-4 flex flex-col gap-2 px-4 pb-4" data-debug-id="notifications-sheet__items">
              {questions.map((q) => {
                // story-questions: forYou wanneer assignee = ingelogd; idee-vragen
                // zijn altijd "voor jou" (idee is strikt user_id-only).
                const forYou =
                  q.kind === 'idea' || q.assignee_id === currentUserId
                const code = q.kind === 'idea' ? q.idea_code : (q.story_code ?? '—')
                const title = q.kind === 'idea' ? q.idea_title : q.story_title
                return (
                  <li key={q.id}>
                    <button
                      type="button"
                      onClick={() => setActiveQuestion(q)}
                      className={cn(
                        'border-border w-full rounded-md border p-3 text-left transition-colors hover:bg-surface-container',
                        forYou &&
                          'bg-primary-container text-primary-container-foreground border-primary/30 hover:bg-primary-container/80',
                      )}
                    >
                      <div className="flex items-baseline gap-2">
                        <span className="font-mono text-xs opacity-80">{code}</span>
                        <span className="line-clamp-1 text-sm font-medium">{title}</span>
                      </div>
                      <p
                        className={cn(
                          'line-clamp-2 mt-1 text-sm',
                          forYou ? 'opacity-90' : 'text-muted-foreground',
                        )}
                      >
                        {q.question}
                      </p>
                      {forYou && (
                        <span className="mt-2 inline-block rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide">
                          Voor jou
                        </span>
                      )}
                    </button>
                  </li>
                )
              })}
            </ul>
          )}
          <div className="border-border mt-4 border-t px-4 pt-4 pb-2">
            <p className="text-muted-foreground mb-2 text-xs font-medium uppercase tracking-wide">
              Notificatie-instellingen
            </p>
            <PushToggle vapidPublicKey={process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY} />
          </div>
        </SheetContent>
      </Sheet>

      <AnswerModal
        question={activeQuestion}
        isDemo={isDemo}
        onClose={() => setActiveQuestion(null)}
      />
    </>
  )
}