"use client";

import * as React from "react";
import { CheckCircle2, Circle, RotateCcw } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

import { TASK_LABELS } from "./catalog";
import type { ResolvedTask, TutorialTaskId } from "./types";

type TaskChecklistSheetProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  tasks: readonly ResolvedTask[];
  completedTasks: readonly TutorialTaskId[];
  activeTask: TutorialTaskId | null;
  onStartTask: (taskId: TutorialTaskId) => void;
  onRestartTour: () => void;
  onResetProgress: () => void;
};

export function TutorialTaskChecklistSheet({
  open,
  onOpenChange,
  tasks,
  completedTasks,
  activeTask,
  onStartTask,
  onRestartTour,
  onResetProgress,
}: TaskChecklistSheetProps) {
  const doneCount = completedTasks.length;
  const totalCatalog = Math.max(tasks.length + doneCount, doneCount);
  // Progress against known incomplete + completed (resolved catalog already drops done tasks).
  const progressValue =
    totalCatalog === 0 ? 100 : Math.round((doneCount / totalCatalog) * 100);

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right" className="flex w-full flex-col gap-0 sm:max-w-md">
        <SheetHeader className="border-b pb-4">
          <SheetTitle>Tutorial</SheetTitle>
          <SheetDescription>
            Guided tasks adapt to what you can access. Progress is saved on this
            device.
          </SheetDescription>
          <div className="space-y-2 pt-2">
            <div className="flex items-center justify-between text-xs text-muted-foreground">
              <span>
                {doneCount} completed
                {tasks.length > 0 ? ` · ${tasks.length} remaining` : ""}
              </span>
              <span>{progressValue}%</span>
            </div>
            <Progress value={progressValue} />
          </div>
        </SheetHeader>

        <div className="flex flex-1 flex-col gap-3 overflow-y-auto py-4">
          {tasks.length === 0 && doneCount === 0 ? (
            <p className="text-sm text-muted-foreground">
              No guided tasks are available for your permissions right now.
            </p>
          ) : null}

          {tasks.length === 0 && doneCount > 0 ? (
            <p className="text-sm text-muted-foreground">
              You&apos;re all set. Restart the tour or reset progress if you want
              to practice again.
            </p>
          ) : null}

          {completedTasks.map((id) => (
            <div
              key={id}
              className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/30 px-3 py-3"
            >
              <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-primary" />
              <div className="min-w-0">
                <p className="text-sm font-medium">
                  {TASK_LABELS[id] ?? id} — done
                </p>
              </div>
            </div>
          ))}

          {tasks.map((task) => {
            const isActive = activeTask === task.id;
            return (
              <div
                key={task.id}
                className={cn(
                  "flex flex-col gap-3 rounded-lg border px-3 py-3",
                  isActive ? "border-primary/40 bg-primary/5" : "border-border/60",
                )}
              >
                <div className="flex items-start gap-3">
                  <Circle className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium">{task.title}</p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {task.description}
                    </p>
                  </div>
                </div>
                <Button
                  type="button"
                  size="sm"
                  variant={isActive ? "secondary" : "default"}
                  className="self-start"
                  onClick={() => onStartTask(task.id)}
                >
                  {isActive ? "Resume" : "Start"}
                </Button>
              </div>
            );
          })}
        </div>

        <div className="mt-auto flex flex-col gap-2 border-t pt-4">
          <Button type="button" variant="outline" onClick={onRestartTour}>
            <RotateCcw className="size-3.5" />
            Restart welcome tour
          </Button>
          <Button type="button" variant="ghost" onClick={onResetProgress}>
            Reset all progress
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  );
}