import type { Project } from "@vtit-agent-coding/shared";
import { GitBranch, Info, Loader2, Plus, Settings, X } from "lucide-react";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { toast } from "sonner";
import { Button } from "../components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";

const DEFAULT_MODULES = ["NGUOI-DUNG", "KHOA-HOC", "BAI-HOC", "BAI-TAP", "DON-HANG", "THANH-TOAN", "BAO-CAO", "THONG-BAO", "HE-THONG", "TICH-HOP"];

export function ProjectsPage() {
  const [projects, setProjects] = useState<(Project & { board_id?: string })[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [isOpen, setIsOpen] = useState(false);

  // New project form state
  const [name, setName] = useState("");
  const [code, setCode] = useState("");
  const [isCodeModified, setIsCodeModified] = useState(false);
  const [domain, setDomain] = useState("");
  const [description, setDescription] = useState("");

  // Repository integration
  const [repoUrl, setRepoUrl] = useState("");
  const [githubUrl, setGithubUrl] = useState("");
  const [gitlabUrl, setGitlabUrl] = useState("");
  const [gitlabProjectId, setGitlabProjectId] = useState("");
  const [gitlabAccessToken, setGitlabAccessToken] = useState("");
  const [gitlabWebhookSecret, setGitlabWebhookSecret] = useState("");

  // Show detailed GitLab config if gitlab URL is typed
  const [showGitLabDetails, setShowGitLabDetails] = useState(false);

  // Modules list
  const [modules, setModules] = useState<string[]>(DEFAULT_MODULES);
  const [newModuleInput, setNewModuleInput] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const navigate = useNavigate();

  useEffect(() => {
    fetchProjects();
  }, []);

  async function fetchProjects() {
    setIsLoading(true);
    try {
      const res = await fetch("/api/projects");
      if (res.ok) {
        const data = await res.json();
        setProjects(Array.isArray(data) ? data : []);
      }
    } catch (err) {
      console.error("Failed to fetch projects", err);
    } finally {
      setIsLoading(false);
    }
  }

  // Handle Project Name input changes & auto-slug Project Code
  const handleNameChange = (val: string) => {
    setName(val);
    if (!isCodeModified) {
      const slug = val
        .toUpperCase()
        .replace(/[^A-Z0-9\s-]/g, "") // remove special characters except spaces/hyphens
        .trim()
        .replace(/[\s_]+/g, "-"); // replace space/underscore with hyphens
      setCode(slug);
    }
  };

  // Handle Project Code manual input
  const handleCodeChange = (val: string) => {
    setCode(val.toUpperCase().replace(/[\s_]+/g, "-"));
    setIsCodeModified(true);
  };

  // Auto-fill project name/code when Repository URL is pasted/entered
  const handleRepoUrlChange = (val: string) => {
    setRepoUrl(val);
    const trimmedVal = val.trim();

    let extractedName = "";
    if (trimmedVal.includes("github.com")) {
      setGithubUrl(trimmedVal);
      setGitlabUrl("");
      setShowGitLabDetails(false);
      const match = trimmedVal.match(/github\.com\/([^/]+)\/([^/.]+)/);
      if (match?.[2]) {
        extractedName = match[2];
      }
    } else if (trimmedVal.includes("gitlab")) {
      setGitlabUrl(trimmedVal);
      setGithubUrl("");
      setShowGitLabDetails(true);
      const match = trimmedVal.match(/gitlab(?:[^/]*)\/([^/]+)\/([^/.]+)/);
      if (match?.[2]) {
        extractedName = match[2];
      }
    } else {
      setGithubUrl("");
      setGitlabUrl("");
      setShowGitLabDetails(false);
    }

    if (extractedName && !name) {
      const parsedName = extractedName
        .split(/[-_]+/)
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ");
      setName(parsedName);
      if (!isCodeModified) {
        setCode(extractedName.toUpperCase().replace(/[^A-Z0-9-]/g, "-"));
      }
    }
  };

  // Add a module chip
  const handleAddModule = () => {
    const trimmed = newModuleInput
      .trim()
      .toUpperCase()
      .replace(/[\s_]+/g, "-");
    if (trimmed && !modules.includes(trimmed)) {
      setModules([...modules, trimmed]);
      setNewModuleInput("");
    }
  };

  // Delete a module chip
  const handleRemoveModule = (modToRemove: string) => {
    setModules(modules.filter((m) => m !== modToRemove));
  };

  async function handleCreateProject(e: React.FormEvent) {
    e.preventDefault();

    const trimmedCode = code.trim().toUpperCase();
    const trimmedName = name.trim();

    if (!trimmedCode) {
      toast.error("Mã dự án không được để trống.");
      return;
    }
    if (!trimmedName) {
      toast.error("Tên dự án không được để trống.");
      return;
    }

    setIsSubmitting(true);

    try {
      const res = await fetch("/api/projects", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          code: trimmedCode,
          name: trimmedName,
          domain: domain.trim() || null,
          github_url: githubUrl.trim() || null,
          gitlab_url: gitlabUrl.trim() || null,
          gitlab_project_id: gitlabProjectId.trim() || null,
          gitlab_access_token: gitlabAccessToken.trim() || null,
          gitlab_webhook_secret: gitlabWebhookSecret.trim() || null,
          description: description.trim() || null,
          modules: modules,
        }),
      });

      if (res.ok) {
        const newProj = (await res.json()) as Project & { board_id?: string };
        toast.success(`Khởi tạo dự án ${newProj.name} thành công!`);
        setIsOpen(false);
        // Reset form state
        setName("");
        setCode("");
        setIsCodeModified(false);
        setDomain("");
        setDescription("");
        setRepoUrl("");
        setGithubUrl("");
        setGitlabUrl("");
        setGitlabProjectId("");
        setGitlabAccessToken("");
        setGitlabWebhookSecret("");
        setShowGitLabDetails(false);
        setModules(DEFAULT_MODULES);
        const targetUrl = newProj.board_id ? `/boards/${newProj.board_id}` : `/projects/${newProj.id}`;
        navigate(targetUrl);
      } else {
        const data = (await res.json().catch(() => ({}))) as Record<string, any>;
        const msg = data.error?.message || data.message || "Tạo dự án thất bại. Vui lòng kiểm tra lại thông tin.";
        toast.error(msg);
      }
    } catch (err) {
      console.error("Failed to create project", err);
      toast.error("Không thể kết nối tới máy chủ. Vui lòng thử lại sau.");
    } finally {
      setIsSubmitting(false);
    }
  }

  const safeProjects = Array.isArray(projects) ? projects : [];
  const filteredProjects = safeProjects.filter(
    (p) => p?.name && (p.name.toLowerCase().includes(search.toLowerCase()) || p.code?.toLowerCase().includes(search.toLowerCase())),
  );

  return (
    <div className="flex-1 overflow-y-auto p-6">
      <div className="w-full space-y-8">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-content-primary">Dự Án Doanh Nghiệp</h1>
            <p className="text-muted-foreground mt-1">Quản lý tập trung Master Plan, Kanban, Rules, Tài liệu & Tích hợp GitLab/GitHub Enterprise</p>
          </div>

          <Dialog open={isOpen} onOpenChange={setIsOpen}>
            <DialogTrigger>
              <Button className="bg-accent hover:opacity-90 text-surface-primary font-semibold flex items-center gap-1.5 shadow-sm">
                <Plus className="size-4" />
                Tạo Dự Án Mới
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-xl max-h-[85vh] overflow-y-auto p-6">
              <DialogHeader className="border-b border-border pb-3">
                <DialogTitle className="text-lg font-bold">Khởi Tạo Dự Án Mới</DialogTitle>
              </DialogHeader>
              <form onSubmit={handleCreateProject} className="space-y-5 py-3">
                {/* Section 1: Basic Info */}
                <div className="space-y-4">
                  <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-content-tertiary">
                    <Info className="size-3.5" />
                    <span>Thông tin cơ bản</span>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="proj-name">Tên Dự Án *</Label>
                      <Input
                        id="proj-name"
                        placeholder="VD: VTIT Agent Coding System"
                        value={name}
                        onChange={(e) => handleNameChange(e.target.value)}
                        required
                        className="mt-1"
                      />
                    </div>
                    <div>
                      <Label htmlFor="proj-code">Mã Dự Án (Project Code) *</Label>
                      <Input
                        id="proj-code"
                        placeholder="VD: VTIT-KANBAN"
                        value={code}
                        onChange={(e) => handleCodeChange(e.target.value)}
                        required
                        className="mt-1 font-mono uppercase"
                      />
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="proj-domain">Domain Doanh Nghiệp / Subdomain</Label>
                    <Input
                      id="proj-domain"
                      placeholder="VD: kanban.company.com"
                      value={domain}
                      onChange={(e) => setDomain(e.target.value)}
                      className="mt-1"
                    />
                  </div>
                </div>

                {/* Section 2: Git Repo Integration */}
                <div className="border-t border-border pt-4 space-y-4">
                  <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-content-tertiary">
                    <GitBranch className="size-3.5" />
                    <span>Tích hợp Repository</span>
                  </div>
                  <div>
                    <Label htmlFor="proj-repo">Git Repository URL (GitHub / GitLab)</Label>
                    <Input
                      id="proj-repo"
                      placeholder="VD: https://github.com/saltbo/agent-kanban hoặc link GitLab"
                      value={repoUrl}
                      onChange={(e) => handleRepoUrlChange(e.target.value)}
                      className="mt-1"
                    />
                    <p className="text-[11px] text-content-tertiary mt-1">
                      Hệ thống tự động phân tích tên và mã dự án khi paste link repository hợp lệ.
                    </p>
                  </div>

                  {showGitLabDetails && (
                    <div className="bg-surface-secondary/50 rounded-lg p-4 border border-border space-y-4">
                      <div className="flex items-center gap-1.5 text-xs font-semibold text-content-secondary">
                        <Settings className="size-3.5" />
                        <span>Cấu hình GitLab Enterprise</span>
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="proj-gitlab-id">GitLab Project ID</Label>
                          <Input
                            id="proj-gitlab-id"
                            placeholder="Số ID, ví dụ: 48921"
                            value={gitlabProjectId}
                            onChange={(e) => setGitlabProjectId(e.target.value)}
                            className="mt-1"
                          />
                        </div>
                        <div>
                          <Label htmlFor="proj-gitlab-token">GitLab Access Token</Label>
                          <Input
                            id="proj-gitlab-token"
                            type="password"
                            placeholder="glpat-..."
                            value={gitlabAccessToken}
                            onChange={(e) => setGitlabAccessToken(e.target.value)}
                            className="mt-1"
                          />
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="proj-gitlab-secret">Webhook Secret (Dùng để xác thực webhook)</Label>
                        <Input
                          id="proj-gitlab-secret"
                          type="password"
                          placeholder="Mật khẩu bảo mật cho webhook"
                          value={gitlabWebhookSecret}
                          onChange={(e) => setGitlabWebhookSecret(e.target.value)}
                          className="mt-1"
                        />
                      </div>
                    </div>
                  )}
                </div>

                {/* Section 3: Modules Configuration */}
                <div className="border-t border-border pt-4 space-y-3">
                  <Label>Phân hệ chức năng (Modules)</Label>
                  <div className="flex flex-wrap gap-1.5 max-h-36 overflow-y-auto p-2 border border-input rounded-md bg-background">
                    {modules.map((mod) => (
                      <span
                        key={mod}
                        className="inline-flex items-center gap-1 bg-surface-tertiary text-content-secondary font-mono text-xs px-2 py-0.5 rounded border border-border"
                      >
                        {mod}
                        <button type="button" onClick={() => handleRemoveModule(mod)} className="text-content-tertiary hover:text-content-primary">
                          <X className="size-3" />
                        </button>
                      </span>
                    ))}
                    {modules.length === 0 && <span className="text-xs text-content-tertiary">Chưa có phân hệ nào.</span>}
                  </div>
                  <div className="flex gap-2">
                    <Input
                      placeholder="Thêm phân hệ mới (VD: SAN-PHAM, KHACH-HANG...)"
                      value={newModuleInput}
                      onChange={(e) => setNewModuleInput(e.target.value)}
                      onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), handleAddModule())}
                      className="text-xs"
                    />
                    <Button type="button" variant="outline" onClick={handleAddModule} className="text-xs shrink-0">
                      Thêm
                    </Button>
                  </div>
                </div>

                {/* Section 4: Description */}
                <div className="border-t border-border pt-4">
                  <Label htmlFor="proj-desc">Mô tả tổng quan dự án</Label>
                  <Textarea
                    id="proj-desc"
                    placeholder="Mô tả mục tiêu, phạm vi dự án..."
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    className="mt-1 min-h-[70px]"
                  />
                </div>

                {/* Submit actions */}
                <div className="flex justify-end gap-2.5 pt-4 border-t border-border">
                  <Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={isSubmitting}>
                    Hủy
                  </Button>
                  <Button type="submit" disabled={isSubmitting} className="bg-accent text-surface-primary hover:opacity-90">
                    {isSubmitting ? (
                      <>
                        <Loader2 className="size-3.5 animate-spin mr-1.5" />
                        Đang Khởi Tạo...
                      </>
                    ) : (
                      "Khởi Tạo Dự Án"
                    )}
                  </Button>
                </div>
              </form>
            </DialogContent>
          </Dialog>
        </div>

        <div className="mb-6 max-w-md">
          <Input placeholder="Tìm kiếm dự án theo tên hoặc mã..." value={search} onChange={(e) => setSearch(e.target.value)} />
        </div>

        {isLoading ? (
          <div className="py-12 text-center text-muted-foreground">Đang tải danh sách dự án...</div>
        ) : filteredProjects.length === 0 ? (
          <div className="py-16 text-center border rounded-lg border-dashed bg-card/50">
            <h3 className="text-lg font-medium">Chưa có dự án nào</h3>
            <p className="text-sm text-muted-foreground mt-1">Bắt đầu bằng cách tạo dự án mới ở trên</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredProjects.map((project) => {
              const projectUrl = `/projects/${project.id}`;
              return (
                <Card key={project.id} className="hover:border-primary/50 transition-colors flex flex-col justify-between">
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <span className="px-2.5 py-0.5 rounded text-xs font-mono font-bold bg-primary/10 text-primary">{project.code}</span>
                      <span className="text-xs text-muted-foreground">{new Date(project.updated_at).toLocaleDateString()}</span>
                    </div>
                    <CardTitle className="text-xl mt-2">
                      <Link to={projectUrl} className="hover:underline">
                        {project.name}
                      </Link>
                    </CardTitle>
                    <CardDescription className="line-clamp-2">{project.description || "Chưa có mô tả dự án."}</CardDescription>
                  </CardHeader>
                  <CardContent className="pt-0">
                    {project.gitlab_url && <div className="text-xs text-muted-foreground font-mono truncate mb-4">🦊 {project.gitlab_url}</div>}
                    {project.github_url && <div className="text-xs text-muted-foreground font-mono truncate mb-4">🐙 {project.github_url}</div>}
                    <div className="flex items-center gap-2">
                      <Button
                        className="flex-1 bg-primary hover:bg-primary/90 text-primary-foreground font-semibold"
                        onClick={() => navigate(projectUrl)}
                      >
                        Truy cập Dự Án
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}