Scrum4Me/components/ideas/idea-timeline.tsx

'use client'

// IdeaTimeline — chronologische merge van IdeaLog + ClaudeQuestion entries.
// Server-component zou ook kunnen, maar we mounten dit binnen de client-side
// detail-layout dus client is simpler (geen rsc-boundary doorbreken).
//
// Iconen + kleur per log-type voor snelle herkenning.
// Open questions krijgen een inline answer-form (M12 hotfix — zie
// notifications-bell-pad in M11; voor idee-vragen blijft de bel buiten beeld).

import { useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import {
  ClipboardList,
  FileText,
  HelpCircle,
  Lightbulb,
  MessageCircle,
  RefreshCw,
  StickyNote,
  Wrench,
} from 'lucide-react'
import { toast } from 'sonner'

import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { answerQuestion } from '@/actions/questions'
import { createUserQuestionAction } from '@/actions/user-questions'

import type { IdeaLogType } from '@prisma/client'

export interface TimelineLog {
  id: string
  type: string
  content: string
  metadata: unknown
  created_at: string
}

export interface TimelineQuestion {
  id: string
  question: string
  options: string[] | null
  status: 'open' | 'answered' | 'cancelled' | 'expired'
  answer: string | null
  created_at: string
  expires_at: string
}

export interface TimelineUserQuestion {
  id: string
  question: string
  answer: string | null
  status: 'pending' | 'answered'
  created_at: string
}

interface Props {
  logs: TimelineLog[]
  questions: TimelineQuestion[]
  userQuestions: TimelineUserQuestion[]
  planMd: string | null
  ideaId: string
}

const LOG_ICON: Record<IdeaLogType, React.ReactNode> = {
  DECISION: <Lightbulb className="size-4" />,
  NOTE: <StickyNote className="size-4" />,
  GRILL_RESULT: <FileText className="size-4" />,
  PLAN_RESULT: <ClipboardList className="size-4" />,
  STATUS_CHANGE: <RefreshCw className="size-4" />,
  JOB_EVENT: <Wrench className="size-4" />,
}

const LOG_LABEL: Record<IdeaLogType, string> = {
  DECISION: 'Beslissing',
  NOTE: 'Notitie',
  GRILL_RESULT: 'Grill-resultaat',
  PLAN_RESULT: 'Plan-resultaat',
  STATUS_CHANGE: 'Status',
  JOB_EVENT: 'Job-event',
}

const QUESTION_STATUS_LABEL: Record<TimelineQuestion['status'], string> = {
  open: 'Open',
  answered: 'Beantwoord',
  cancelled: 'Geannuleerd',
  expired: 'Verlopen',
}

export function IdeaTimeline({ logs, questions, userQuestions, planMd, ideaId }: Props) {
  const merged = [
    ...logs.map((l) => ({
      kind: 'log' as const,
      created_at: l.created_at,
      data: l,
    })),
    ...questions.map((q) => ({
      kind: 'question' as const,
      created_at: q.created_at,
      data: q,
    })),
    ...userQuestions.map((uq) => ({
      kind: 'user_question' as const,
      created_at: uq.created_at,
      data: uq,
    })),
  ].sort((a, b) => (a.created_at < b.created_at ? 1 : -1))

  if (merged.length === 0 && !planMd) {
    return (
      <p className="text-sm text-muted-foreground py-8 text-center italic">
        Nog geen activiteit op dit idee.
      </p>
    )
  }

  return (
    <div>
    <ol className="border-l-2 border-input pl-4 space-y-3 ml-2">
      {merged.map((entry, i) => {
        // Expliciete locale + format om SSR/CSR hydration-mismatch te voorkomen
        // (server-locale verschilde van browser-locale).
        const time = new Date(entry.created_at).toLocaleString('nl-NL', {
          dateStyle: 'short',
          timeStyle: 'short',
        })

        if (entry.kind === 'log') {
          const type = entry.data.type as IdeaLogType
          return (
            <li key={`l-${entry.data.id}`} className="relative">
              <span className="absolute -left-[26px] top-1 flex size-5 items-center justify-center rounded-full bg-surface-container text-muted-foreground">
                {LOG_ICON[type] ?? <StickyNote className="size-4" />}
              </span>
              <div className="rounded-md border border-input bg-surface-container p-3 space-y-1">
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span className="font-medium uppercase tracking-wide">
                    {LOG_LABEL[type] ?? type}
                  </span>
                  <span>·</span>
                  <time>{time}</time>
                </div>
                <p className="text-sm whitespace-pre-wrap">{entry.data.content}</p>
                {entry.data.metadata != null &&
                typeof entry.data.metadata === 'object' &&
                Object.keys(entry.data.metadata as object).length > 0 ? (
                  <details className="text-xs text-muted-foreground">
                    <summary className="cursor-pointer">metadata</summary>
                    <pre className="mt-1 whitespace-pre-wrap font-mono text-[10px]">
                      {JSON.stringify(entry.data.metadata, null, 2)}
                    </pre>
                  </details>
                ) : null}
              </div>
            </li>
          )
        }

        if (entry.kind === 'user_question') {
          const uq = entry.data
          return (
            <li key={`uq-${uq.id}-${i}`} className="relative">
              <span className="absolute -left-[26px] top-1 flex size-5 items-center justify-center rounded-full bg-surface-container text-primary">
                <MessageCircle className="size-4" />
              </span>
              <div className="rounded-md border border-input bg-surface-container p-3 space-y-2">
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span className="font-medium uppercase tracking-wide">Jouw vraag</span>
                  <span>·</span>
                  <time>{time}</time>
                </div>
                <p className="text-sm">{uq.question}</p>
                {uq.status === 'pending' ? (
                  <p className="text-xs text-muted-foreground italic">
                    Wacht op antwoord van Claude...
                  </p>
                ) : uq.answer ? (
                  <div className="mt-2 rounded bg-muted/50 p-3 text-sm">
                    <span className="text-xs font-medium uppercase tracking-wide text-primary mr-2">
                      Claude
                    </span>
                    {uq.answer}
                  </div>
                ) : null}
              </div>
            </li>
          )
        }

        const q = entry.data
        return (
          <li key={`q-${q.id}-${i}`} className="relative">
            <span className="absolute -left-[26px] top-1 flex size-5 items-center justify-center rounded-full bg-surface-container text-status-review">
              <HelpCircle className="size-4" />
            </span>
            <div className="rounded-md border border-input bg-surface-container p-3 space-y-2">
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <span className="font-medium uppercase tracking-wide">Vraag</span>
                <span>·</span>
                <span>{QUESTION_STATUS_LABEL[q.status]}</span>
                <span>·</span>
                <time>{time}</time>
              </div>
              <p className="text-sm">{q.question}</p>
              {q.status === 'open' ? (
                <AnswerForm questionId={q.id} options={q.options} />
              ) : (
                <>
                  {q.options && q.options.length > 0 ? (
                    <ul className="text-xs text-muted-foreground list-disc list-inside">
                      {q.options.map((o, ii) => (
                        <li key={ii}>{o}</li>
                      ))}
                    </ul>
                  ) : null}
                  {q.answer ? (
                    <p className="text-sm border-l-2 border-primary pl-2 text-foreground">
                      <span className="text-xs font-medium uppercase tracking-wide text-primary mr-2">
                        Antwoord
                      </span>
                      {q.answer}
                    </p>
                  ) : null}
                </>
              )}
            </div>
          </li>
        )
      })}
    </ol>
    {planMd && (
      <div className="mt-4 border-t pt-4">
        <UserChatInput ideaId={ideaId} />
      </div>
    )}
    </div>
  )
}

// ---------------------------------------------------------------------------
// AnswerForm — inline antwoord op een open Claude-vraag.
// Voor multi-choice (options): knoppen die direct submitten met de gekozen
// optie. Anders: textarea + Submit knop.

function AnswerForm({
  questionId,
  options,
}: {
  questionId: string
  options: string[] | null
}) {
  const router = useRouter()
  const [text, setText] = useState('')
  const [pending, startTransition] = useTransition()

  function submit(answer: string) {
    const trimmed = answer.trim()
    if (!trimmed) {
      toast.error('Antwoord mag niet leeg zijn')
      return
    }
    startTransition(async () => {
      const r = await answerQuestion(questionId, trimmed)
      if (!r.ok) {
        toast.error(r.error)
        return
      }
      toast.success('Antwoord verzonden — agent gaat door.')
      setText('')
      router.refresh()
    })
  }

  if (options && options.length > 0) {
    return (
      <div className="flex flex-col gap-1.5 pt-1">
        {options.map((opt, i) => (
          <Button
            key={i}
            size="sm"
            variant="outline"
            className="justify-start text-left h-auto py-2 whitespace-normal"
            disabled={pending}
            onClick={() => submit(opt)}
          >
            {opt}
          </Button>
        ))}
        <details className="text-xs text-muted-foreground pt-1">
          <summary className="cursor-pointer">Of typ een eigen antwoord</summary>
          <div className="space-y-2 pt-2">
            <Textarea
              value={text}
              onChange={(e) => setText(e.target.value)}
              rows={3}
              placeholder="Eigen antwoord…"
              disabled={pending}
            />
            <div className="flex justify-end">
              <Button size="sm" disabled={pending || !text.trim()} onClick={() => submit(text)}>
                Verzend
              </Button>
            </div>
          </div>
        </details>
      </div>
    )
  }

  return (
    <div className="space-y-2 pt-1">
      <Textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={3}
        placeholder="Antwoord…"
        disabled={pending}
      />
      <div className="flex justify-end">
        <Button size="sm" disabled={pending || !text.trim()} onClick={() => submit(text)}>
          Verzend
        </Button>
      </div>
    </div>
  )
}

// ---------------------------------------------------------------------------
// UserChatInput — stel een vraag aan Claude over het plan van dit idee.

function UserChatInput({ ideaId }: { ideaId: string }) {
  const router = useRouter()
  const [question, setQuestion] = useState('')
  const [isPending, startTransition] = useTransition()

  function submit() {
    const trimmed = question.trim()
    if (!trimmed) return
    startTransition(async () => {
      const res = await createUserQuestionAction(ideaId, trimmed)
      if ('success' in res && res.success) {
        setQuestion('')
        toast.success('Vraag verstuurd — Claude antwoordt zodra mogelijk.')
        router.refresh()
      } else if ('error' in res) {
        toast.error(res.error)
      }
    })
  }

  return (
    <div className="space-y-2">
      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
        Stel een vraag aan Claude
      </p>
      <Textarea
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
        rows={3}
        placeholder="Vraag iets over het plan…"
        disabled={isPending}
      />
      <div className="flex justify-end">
        <Button size="sm" disabled={isPending || !question.trim()} onClick={submit}>
          Vraag stellen
        </Button>
      </div>
    </div>
  )
}