'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 { cn } from '@/lib/utils'
import type { NotificationQuestion } from '@/stores/notifications-store'

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">
          <SheetHeader>
            <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">
              {questions.map((q) => {
                const forYou = q.assignee_id === currentUserId
                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">
                          {q.story_code ?? '—'}
                        </span>
                        <span className="line-clamp-1 text-sm font-medium">
                          {q.story_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>
          )}
        </SheetContent>
      </Sheet>

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