"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { FolderPlus, Loader2 } from "lucide-react";
import { Shell } from "@/components/layout/shell";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function NewProjectPage() {
  const [name, setName] = useState("");
  const [path, setPath] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const router = useRouter();

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    const res = await fetch("/api/projects", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, path, source: "manual" }),
    });
    if (res.ok) {
      const body = await res.json();
      router.push(`/projects/${body.project.id}`);
    } else {
      const body = await res.json().catch(() => ({}));
      setError(body.error ?? "lưu thất bại");
      setSubmitting(false);
    }
  }

  return (
    <Shell
      crumbs={[
        { label: "Tổng quan", href: "/" },
        { label: "Thêm dự án" },
      ]}
    >
      <div className="mx-auto max-w-2xl">
        <Card>
          <CardHeader>
            <div className="flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center rounded-md bg-primary/15 text-primary">
                <FolderPlus className="h-4 w-4" />
              </span>
              <div>
                <CardTitle>Thêm dự án</CardTitle>
                <CardDescription>
                  Đăng ký repo bên ngoài, hoặc ghi đè entry tự quét.
                </CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <form onSubmit={onSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">Tên dự án</Label>
                <Input
                  id="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="my-app"
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="path">Đường dẫn</Label>
                <Input
                  id="path"
                  value={path}
                  onChange={(e) => setPath(e.target.value)}
                  placeholder="/đường-dẫn-tuyệt-đối/tới/repo"
                  className="font-mono"
                  required
                />
                <p className="text-xs text-muted-foreground">
                  Bắt buộc là đường dẫn tuyệt đối trên server.
                </p>
              </div>
              {error && (
                <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                  {error}
                </p>
              )}
              <div className="flex justify-end gap-2 pt-2">
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => router.back()}
                  disabled={submitting}
                >
                  Huỷ
                </Button>
                <Button type="submit" disabled={submitting}>
                  {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
                  {submitting ? "Đang lưu…" : "Lưu dự án"}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </Shell>
  );
}