"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { toast } from "sonner";
import { Flame, Plus, LayoutGrid, Timer as TimerIcon } from "lucide-react";
import type { Workout } from "@/db/schema";
import { isSameLocalDay } from "@/lib/utils";
import { WorkoutCard } from "@/components/workout-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

function greeting() {
  const h = new Date().getHours();
  if (h < 11) return "Selamat pagi";
  if (h < 15) return "Selamat siang";
  if (h < 19) return "Selamat sore";
  return "Selamat malam";
}

// Consecutive days (ending today or yesterday) that have at least one workout,
// looking at the last 7 days.
function calcStreak(workouts: Workout[]) {
  let streak = 0;
  for (let i = 0; i < 7; i++) {
    const day = new Date();
    day.setDate(day.getDate() - i);
    const has = workouts.some((w) => isSameLocalDay(new Date(w.createdAt), day));
    if (has) {
      streak++;
    } else if (i === 0) {
      continue; // today empty is fine — streak from yesterday still counts
    } else {
      break;
    }
  }
  return streak;
}

export default function Dashboard() {
  const [workouts, setWorkouts] = useState<Workout[]>([]);
  const [loading, setLoading] = useState(true);
  const [name, setName] = useState("Guest");
  const [editingName, setEditingName] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem("fittrack-name");
    if (saved) setName(saved);

    fetch("/api/workouts")
      .then((res) => {
        if (!res.ok) throw new Error();
        return res.json();
      })
      .then(setWorkouts)
      .catch(() => toast.error("Gagal memuat workouts — cek koneksi database"))
      .finally(() => setLoading(false));
  }, []);

  const saveName = () => {
    const trimmed = name.trim() || "Guest";
    setName(trimmed);
    localStorage.setItem("fittrack-name", trimmed);
    setEditingName(false);
  };

  const today = useMemo(
    () =>
      workouts.filter((w) => isSameLocalDay(new Date(w.createdAt), new Date())),
    [workouts]
  );

  const streak = useMemo(() => calcStreak(workouts), [workouts]);

  const weekMinutes = useMemo(() => {
    const weekAgo = new Date();
    weekAgo.setDate(weekAgo.getDate() - 6);
    weekAgo.setHours(0, 0, 0, 0);
    return workouts
      .filter((w) => new Date(w.createdAt) >= weekAgo)
      .reduce((sum, w) => sum + w.duration, 0);
  }, [workouts]);

  const toggleComplete = async (workout: Workout) => {
    const next = !workout.completed;
    // optimistic update
    setWorkouts((ws) =>
      ws.map((w) => (w.id === workout.id ? { ...w, completed: next } : w))
    );
    try {
      const res = await fetch(`/api/workouts/${workout.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ completed: next }),
      });
      if (!res.ok) throw new Error();
    } catch {
      setWorkouts((ws) =>
        ws.map((w) => (w.id === workout.id ? { ...w, completed: !next } : w))
      );
      toast.error("Gagal update status workout");
    }
  };

  return (
    <div className="space-y-6">
      {/* greeting */}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">
            {greeting()},{" "}
            {editingName ? (
              <span className="inline-flex items-center gap-2">
                <Input
                  className="inline-block h-9 w-40"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && saveName()}
                  autoFocus
                />
                <Button size="sm" onClick={saveName}>
                  OK
                </Button>
              </span>
            ) : (
              <button
                className="underline decoration-dotted underline-offset-4 hover:text-primary"
                onClick={() => setEditingName(true)}
                title="Klik untuk ganti nama"
              >
                {name}
              </button>
            )}{" "}
            👋
          </h1>
          <p className="mt-1 text-muted-foreground">
            Siap workout hari ini?
          </p>
        </div>
        <div className="flex items-center gap-2 rounded-full border bg-card px-4 py-2">
          <Flame className="h-5 w-5 text-orange-500" />
          <span className="font-semibold">
            {streak} day{streak !== 1 ? "s" : ""} streak
          </span>
        </div>
      </div>

      {/* quick stats + actions */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Total menit minggu ini
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">{weekMinutes}</p>
            <p className="text-sm text-muted-foreground">menit</p>
          </CardContent>
        </Card>
        <Link href="/log" className="sm:col-span-1">
          <Card className="flex h-full items-center justify-center transition-colors hover:border-primary">
            <CardContent className="flex items-center gap-2 p-6 font-medium">
              <Plus className="h-5 w-5 text-primary" /> Add Workout
            </CardContent>
          </Card>
        </Link>
        <Link href="/templates">
          <Card className="flex h-full items-center justify-center transition-colors hover:border-primary">
            <CardContent className="flex items-center gap-2 p-6 font-medium">
              <LayoutGrid className="h-5 w-5 text-primary" /> Start Template
            </CardContent>
          </Card>
        </Link>
      </div>

      {/* today's workouts */}
      <div>
        <h2 className="mb-3 text-lg font-semibold">Workout Hari Ini</h2>
        {loading ? (
          <div className="space-y-2">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted" />
            ))}
          </div>
        ) : today.length === 0 ? (
          <Card>
            <CardContent className="flex flex-col items-center gap-3 py-10 text-center">
              <TimerIcon className="h-8 w-8 text-muted-foreground" />
              <p className="text-muted-foreground">
                Belum ada workout hari ini. Yuk mulai!
              </p>
              <div className="flex gap-2">
                <Link href="/log">
                  <Button variant="outline" size="sm">
                    <Plus className="h-4 w-4" /> Add Workout
                  </Button>
                </Link>
                <Link href="/templates">
                  <Button size="sm">Start Template</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-2">
            {today.map((w) => (
              <WorkoutCard
                key={w.id}
                workout={w}
                onToggleComplete={toggleComplete}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}