"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Save } from "lucide-react";
import { EXERCISE_SUGGESTIONS } from "@/lib/default-templates";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";

export default function LogWorkoutPage() {
  const router = useRouter();
  const [name, setName] = useState("");
  const [duration, setDuration] = useState("");
  const [category, setCategory] = useState("Cardio");
  const [saving, setSaving] = useState(false);

  const suggestions = name.trim()
    ? EXERCISE_SUGGESTIONS.filter(
        (s) =>
          s.toLowerCase().includes(name.toLowerCase()) &&
          s.toLowerCase() !== name.toLowerCase()
      ).slice(0, 5)
    : [];

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const minutes = Number(duration);
    if (!name.trim()) {
      toast.error("Nama latihan wajib diisi");
      return;
    }
    if (!Number.isFinite(minutes) || minutes <= 0) {
      toast.error("Durasi harus angka positif (menit)");
      return;
    }

    setSaving(true);
    try {
      const res = await fetch("/api/workouts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim(), duration: minutes, category }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || `HTTP ${res.status}`);
      }
      toast.success("Workout tersimpan!");
      router.push("/");
    } catch (err) {
      toast.error(
        `Gagal menyimpan: ${err instanceof Error ? err.message : "unknown"}`
      );
      setSaving(false);
    }
  };

  return (
    <div className="mx-auto max-w-md">
      <Card>
        <CardHeader>
          <CardTitle className="text-xl">Log Workout</CardTitle>
          <p className="text-sm text-muted-foreground">
            Catat latihan yang sudah kamu lakukan
          </p>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="relative">
              <label className="mb-1.5 block text-sm font-medium">
                Nama Latihan
              </label>
              <Input
                placeholder="mis. Push up"
                value={name}
                onChange={(e) => setName(e.target.value)}
                autoComplete="off"
              />
              {suggestions.length > 0 && (
                <ul className="absolute z-10 mt-1 w-full overflow-hidden rounded-md border bg-card shadow-md">
                  {suggestions.map((s) => (
                    <li key={s}>
                      <button
                        type="button"
                        className="w-full px-3 py-2 text-left text-sm hover:bg-accent"
                        onClick={() => setName(s)}
                      >
                        {s}
                      </button>
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <div>
              <label className="mb-1.5 block text-sm font-medium">
                Durasi (menit)
              </label>
              <Input
                type="number"
                min={1}
                placeholder="mis. 15"
                value={duration}
                onChange={(e) => setDuration(e.target.value)}
              />
            </div>

            <div>
              <label className="mb-1.5 block text-sm font-medium">
                Kategori
              </label>
              <Select
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              >
                <option>Cardio</option>
                <option>Strength</option>
                <option>Yoga</option>
                <option>Rest</option>
              </Select>
            </div>

            <Button type="submit" className="w-full" disabled={saving}>
              <Save className="h-4 w-4" />
              {saving ? "Saving..." : "Save Workout"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}