import { useState } from 'react'
import { createFileRoute, useNavigate, Link } from '@tanstack/react-router'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
  sessionDetailOptions, sessionMutations, sessionKeys,
  sessionPlanItemsOptions,
  enrollmentDetailOptions,
  instructorDetailOptions, instructorListOptions,
  lessonPlanListOptions,
} from '@/api/lessons'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { ArrowLeft, CheckSquare, Square } from 'lucide-react'
import { toast } from 'sonner'
import { useAuthStore } from '@/stores/auth.store'
import type { LessonPlan, LessonPlanSection } from '@/types/lesson'

export const Route = createFileRoute('/_authenticated/lessons/sessions/$sessionId')({
  component: SessionDetailPage,
})

const STATUS_ACTIONS: Record<string, { label: string; next: string; variant: 'default' | 'destructive' | 'secondary' | 'outline' }[]> = {
  scheduled: [
    { label: 'Mark Attended', next: 'attended', variant: 'default' },
    { label: 'Mark Missed', next: 'missed', variant: 'destructive' },
    { label: 'Cancel', next: 'cancelled', variant: 'secondary' },
  ],
  attended: [],
  missed: [],
  makeup: [
    { label: 'Mark Attended', next: 'attended', variant: 'default' },
    { label: 'Cancel', next: 'cancelled', variant: 'secondary' },
  ],
  cancelled: [],
}

function sessionStatusBadge(status: string) {
  const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
    scheduled: 'outline', attended: 'default', missed: 'destructive', makeup: 'secondary', cancelled: 'secondary',
  }
  return <Badge variant={variants[status] ?? 'outline'}>{status}</Badge>
}

function formatTime(t: string) {
  const [h, m] = t.split(':').map(Number)
  const ampm = h >= 12 ? 'PM' : 'AM'
  const hour = h % 12 || 12
  return `${hour}:${String(m).padStart(2, '0')} ${ampm}`
}

function SessionDetailPage() {
  const { sessionId } = Route.useParams()
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const hasPermission = useAuthStore((s) => s.hasPermission)
  const canEdit = hasPermission('lessons.edit')

  const { data: session, isLoading } = useQuery(sessionDetailOptions(sessionId))

  const { data: enrollment } = useQuery({
    ...enrollmentDetailOptions(session?.enrollmentId ?? ''),
    enabled: !!session?.enrollmentId,
  })

  useQuery({
    ...instructorDetailOptions(session?.substituteInstructorId ?? enrollment?.instructorId ?? ''),
    enabled: !!(session?.substituteInstructorId ?? enrollment?.instructorId),
  })

  const { data: instructorsList } = useQuery(instructorListOptions({ page: 1, limit: 100, order: 'asc' }))

  const { data: planItems } = useQuery(sessionPlanItemsOptions(sessionId))

  const { data: plansData } = useQuery({
    ...lessonPlanListOptions({ enrollmentId: session?.enrollmentId ?? '', isActive: true }),
    enabled: !!session?.enrollmentId,
  })
  const activePlan: LessonPlan | undefined = plansData?.data?.[0]

  const statusMutation = useMutation({
    mutationFn: (status: string) => sessionMutations.updateStatus(sessionId, status),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId) })
      toast.success('Status updated')
    },
    onError: (err) => toast.error(err.message),
  })

  const notesMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => sessionMutations.updateNotes(sessionId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId) })
      toast.success('Notes saved')
    },
    onError: (err) => toast.error(err.message),
  })

  const subMutation = useMutation({
    mutationFn: (subId: string | null) => sessionMutations.update(sessionId, { substituteInstructorId: subId }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId) })
      toast.success('Substitute updated')
    },
    onError: (err) => toast.error(err.message),
  })

  const linkPlanItemsMutation = useMutation({
    mutationFn: (ids: string[]) => sessionMutations.linkPlanItems(sessionId, ids),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: sessionKeys.planItems(sessionId) })
      toast.success('Plan items linked')
    },
    onError: (err) => toast.error(err.message),
  })

  if (isLoading) return <div className="text-sm text-muted-foreground">Loading...</div>
  if (!session) return <div className="text-sm text-destructive">Session not found.</div>

  const linkedItemIds = new Set(planItems?.map((pi) => pi.lessonPlanItemId) ?? [])

  return (
    <div className="space-y-6 max-w-3xl">
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/sessions', search: {} as any })}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div className="flex-1">
          <h1 className="text-xl font-bold">
            {new Date(session.scheduledDate + 'T00:00:00').toLocaleDateString()} · {formatTime(session.scheduledTime)}
          </h1>
          {enrollment && (
            <Link
              to="/lessons/enrollments/$enrollmentId"
              params={{ enrollmentId: enrollment.id }}
              search={{} as any}
              className="text-sm text-primary hover:underline"
            >
              View Enrollment
            </Link>
          )}
        </div>
        {sessionStatusBadge(session.status)}
      </div>

      {/* Status Actions */}
      {canEdit && (STATUS_ACTIONS[session.status]?.length ?? 0) > 0 && (
        <Card>
          <CardContent className="pt-4">
            <div className="flex gap-2">
              {STATUS_ACTIONS[session.status].map((action) => (
                <Button
                  key={action.next}
                  variant={action.variant}
                  size="sm"
                  onClick={() => statusMutation.mutate(action.next)}
                  disabled={statusMutation.isPending}
                >
                  {action.label}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Substitute Instructor */}
      {canEdit && (
        <Card>
          <CardHeader><CardTitle className="text-base">Substitute Instructor</CardTitle></CardHeader>
          <CardContent className="flex gap-3 items-center">
            <Select
              value={session.substituteInstructorId ?? 'none'}
              onValueChange={(v) => subMutation.mutate(v === 'none' ? null : v)}
            >
              <SelectTrigger className="flex-1">
                <SelectValue placeholder="No substitute" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">No substitute</SelectItem>
                {(instructorsList?.data ?? []).map((i) => (
                  <SelectItem key={i.id} value={i.id}>{i.displayName}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </CardContent>
        </Card>
      )}

      {/* Post-lesson Notes */}
      <NotesCard session={session} canEdit={canEdit} onSave={notesMutation.mutate} saving={notesMutation.isPending} />

      {/* Plan Items */}
      {activePlan && (
        <PlanItemsCard
          plan={activePlan}
          linkedItemIds={linkedItemIds}
          onLink={(ids) => linkPlanItemsMutation.mutate(ids)}
          linking={linkPlanItemsMutation.isPending}
        />
      )}
    </div>
  )
}

// ─── Notes Card ───────────────────────────────────────────────────────────────

function NotesCard({ session, canEdit, onSave, saving }: any) {
  const [instructorNotes, setInstructorNotes] = useState(session.instructorNotes ?? '')
  const [memberNotes, setMemberNotes] = useState(session.memberNotes ?? '')
  const [homeworkAssigned, setHomeworkAssigned] = useState(session.homeworkAssigned ?? '')
  const [nextLessonGoals, setNextLessonGoals] = useState(session.nextLessonGoals ?? '')
  const [topicsCovered, setTopicsCovered] = useState((session.topicsCovered ?? []).join(', '))

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-base">Post-lesson Notes</CardTitle>
          {session.notesCompletedAt && (
            <span className="text-xs text-muted-foreground">
              Saved {new Date(session.notesCompletedAt).toLocaleString()}
            </span>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label>Instructor Notes</Label>
          <Textarea value={instructorNotes} onChange={(e) => setInstructorNotes(e.target.value)} rows={3} disabled={!canEdit} />
        </div>
        <div className="space-y-2">
          <Label>Member Notes (shared with student)</Label>
          <Textarea value={memberNotes} onChange={(e) => setMemberNotes(e.target.value)} rows={2} disabled={!canEdit} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Homework Assigned</Label>
            <Input value={homeworkAssigned} onChange={(e) => setHomeworkAssigned(e.target.value)} disabled={!canEdit} />
          </div>
          <div className="space-y-2">
            <Label>Next Lesson Goals</Label>
            <Input value={nextLessonGoals} onChange={(e) => setNextLessonGoals(e.target.value)} disabled={!canEdit} />
          </div>
        </div>
        <div className="space-y-2">
          <Label>Topics Covered</Label>
          <Input
            value={topicsCovered}
            onChange={(e) => setTopicsCovered(e.target.value)}
            placeholder="Comma-separated topics"
            disabled={!canEdit}
          />
        </div>
        {canEdit && (
          <Button
            onClick={() => onSave({
              instructorNotes: instructorNotes || undefined,
              memberNotes: memberNotes || undefined,
              homeworkAssigned: homeworkAssigned || undefined,
              nextLessonGoals: nextLessonGoals || undefined,
              topicsCovered: topicsCovered ? topicsCovered.split(',').map((s: string) => s.trim()).filter(Boolean) : undefined,
            })}
            disabled={saving}
          >
            {saving ? 'Saving...' : 'Save Notes'}
          </Button>
        )}
      </CardContent>
    </Card>
  )
}

// ─── Plan Items Card ──────────────────────────────────────────────────────────

function PlanItemsCard({ plan, linkedItemIds, onLink, linking }: {
  plan: LessonPlan
  linkedItemIds: Set<string>
  onLink: (ids: string[]) => void
  linking: boolean
}) {
  const [selected, setSelected] = useState<Set<string>>(new Set(linkedItemIds))

  function toggle(id: string) {
    if (linkedItemIds.has(id)) return // already committed
    setSelected((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  const newSelections = [...selected].filter((id) => !linkedItemIds.has(id))

  return (
    <Card>
      <CardHeader><CardTitle className="text-base">Plan Items Worked On</CardTitle></CardHeader>
      <CardContent className="space-y-4">
        {(plan.sections ?? []).map((section: LessonPlanSection) => (
          <div key={section.id}>
            <p className="text-sm font-semibold text-muted-foreground mb-2">{section.title}</p>
            <div className="space-y-1">
              {(section.items ?? []).map((item) => {
                const isLinked = linkedItemIds.has(item.id)
                const isSelected = selected.has(item.id)
                return (
                  <button
                    key={item.id}
                    type="button"
                    className={`flex items-center gap-2 w-full text-left px-2 py-1.5 rounded text-sm transition-colors ${
                      isLinked ? 'opacity-60 cursor-default' : 'hover:bg-accent cursor-pointer'
                    }`}
                    onClick={() => toggle(item.id)}
                    disabled={isLinked}
                  >
                    {isLinked || isSelected
                      ? <CheckSquare className="h-4 w-4 text-primary shrink-0" />
                      : <Square className="h-4 w-4 text-muted-foreground shrink-0" />}
                    <span>{item.title}</span>
                    {isLinked && <span className="text-xs text-muted-foreground ml-auto">linked</span>}
                  </button>
                )
              })}
            </div>
          </div>
        ))}

        {newSelections.length > 0 && (
          <Button onClick={() => onLink(newSelections)} disabled={linking} size="sm">
            {linking ? 'Linking...' : `Link ${newSelections.length} item${newSelections.length !== 1 ? 's' : ''}`}
          </Button>
        )}
      </CardContent>
    </Card>
  )
}