"use client";

import React, { useState, useEffect } from "react";
import {
  Lock,
  LogOut,
  Plus,
  Edit,
  Trash2,
  ExternalLink,
  Sparkles,
  Terminal,
  Gamepad2,
  FlaskConical,
  Search,
  CheckCircle,
  AlertCircle,
  Database,
  ArrowLeft,
  X,
  RefreshCw,
} from "lucide-react";

interface ProjectItem {
  id: string;
  title: string;
  category: "software" | "games" | "lab";
  categoryLabel: string;
  tagline: string;
  status: string;
  statusType: "active" | "alpha" | "prototype" | "upcoming";
  releaseTarget: string;
  description: string;
  longDescription: string;
  features: string[];
  stack: string[];
  accentGradient: string;
  borderGlow: string;
  iconName: string;
  orderIndex?: number;
}

export default function AdminPage() {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loginError, setLoginError] = useState("");
  const [loginLoading, setLoginLoading] = useState(false);

  // Dashboard state
  const [projects, setProjects] = useState<ProjectItem[]>([]);
  const [loadingProjects, setLoadingProjects] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingProject, setEditingProject] = useState<ProjectItem | null>(null);
  const [formError, setFormError] = useState("");
  const [formSubmitting, setFormSubmitting] = useState(false);
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  // Form Fields
  const [formId, setFormId] = useState("");
  const [formTitle, setFormTitle] = useState("");
  const [formCategory, setFormCategory] = useState<"software" | "games" | "lab">("software");
  const [formCategoryLabel, setFormCategoryLabel] = useState("");
  const [formTagline, setFormTagline] = useState("");
  const [formStatus, setFormStatus] = useState("In Active Dev");
  const [formStatusType, setFormStatusType] = useState<"active" | "alpha" | "prototype" | "upcoming">("active");
  const [formReleaseTarget, setFormReleaseTarget] = useState("2027");
  const [formDescription, setFormDescription] = useState("");
  const [formLongDescription, setFormLongDescription] = useState("");
  const [formFeatures, setFormFeatures] = useState("");
  const [formStack, setFormStack] = useState("");
  const [formIconName, setFormIconName] = useState("Terminal");
  const [formAccentGradient, setFormAccentGradient] = useState("from-cyan-500/20 via-blue-600/10 to-transparent");

  // Check initial authentication
  useEffect(() => {
    checkAuthStatus();
  }, []);

  const checkAuthStatus = async () => {
    try {
      const res = await fetch("/api/auth/me");
      const data = await res.json();
      setIsAuthenticated(data.authenticated === true);
      if (data.authenticated) {
        fetchProjects();
      }
    } catch {
      setIsAuthenticated(false);
    }
  };

  const fetchProjects = async () => {
    setLoadingProjects(true);
    try {
      const res = await fetch("/api/projects");
      const data = await res.json();
      if (data.success && Array.isArray(data.data)) {
        setProjects(data.data);
      }
    } catch {
      showToast("Error loading projects from database", true);
    } finally {
      setLoadingProjects(false);
    }
  };

  const showToast = (msg: string, isError = false) => {
    setToastMessage(msg);
    setTimeout(() => {
      setToastMessage(null);
    }, 4000);
  };

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoginError("");
    setLoginLoading(true);

    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });

      const data = await res.json();
      if (res.ok && data.success) {
        setIsAuthenticated(true);
        fetchProjects();
      } else {
        setLoginError(data.error || "Authentication failed. Check credentials.");
      }
    } catch {
      setLoginError("Network connection error to database.");
    } finally {
      setLoginLoading(false);
    }
  };

  const handleLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    setIsAuthenticated(false);
    setUsername("");
    setPassword("");
  };

  const openCreateModal = () => {
    setEditingProject(null);
    setFormId("");
    setFormTitle("");
    setFormCategory("software");
    setFormCategoryLabel("Creative Tool");
    setFormTagline("");
    setFormStatus("In Active Dev");
    setFormStatusType("active");
    setFormReleaseTarget("2027");
    setFormDescription("");
    setFormLongDescription("");
    setFormFeatures("");
    setFormStack("Rust, WebGPU, TypeScript");
    setFormIconName("Terminal");
    setFormAccentGradient("from-cyan-500/20 via-blue-600/10 to-transparent");
    setFormError("");
    setIsModalOpen(true);
  };

  const openEditModal = (p: ProjectItem) => {
    setEditingProject(p);
    setFormId(p.id);
    setFormTitle(p.title);
    setFormCategory(p.category);
    setFormCategoryLabel(p.categoryLabel);
    setFormTagline(p.tagline);
    setFormStatus(p.status);
    setFormStatusType(p.statusType);
    setFormReleaseTarget(p.releaseTarget);
    setFormDescription(p.description);
    setFormLongDescription(p.longDescription);
    setFormFeatures(p.features ? p.features.join("\n") : "");
    setFormStack(p.stack ? p.stack.join(", ") : "");
    setFormIconName(p.iconName || "Terminal");
    setFormAccentGradient(p.accentGradient || "from-cyan-500/20 via-blue-600/10 to-transparent");
    setFormError("");
    setIsModalOpen(true);
  };

  const handleDelete = async (id: string, title: string) => {
    if (!confirm(`Are you sure you want to delete "${title}" from the database?`)) {
      return;
    }

    try {
      const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
      if (res.ok) {
        setProjects((prev) => prev.filter((p) => p.id !== id));
        showToast(`Project "${title}" deleted from database.`);
      } else {
        const data = await res.json();
        showToast(data.error || "Failed to delete", true);
      }
    } catch {
      showToast("Error deleting project", true);
    }
  };

  const handleSaveProject = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormError("");
    setFormSubmitting(true);

    try {
      const featuresArray = formFeatures
        .split("\n")
        .map((s) => s.trim())
        .filter((s) => s.length > 0);

      const stackArray = formStack
        .split(",")
        .map((s) => s.trim())
        .filter((s) => s.length > 0);

      const payload = {
        id: formId || formTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
        title: formTitle,
        category: formCategory,
        categoryLabel: formCategoryLabel,
        tagline: formTagline,
        status: formStatus,
        statusType: formStatusType,
        releaseTarget: formReleaseTarget,
        description: formDescription,
        longDescription: formLongDescription,
        features: featuresArray,
        stack: stackArray,
        iconName: formIconName,
        accentGradient: formAccentGradient,
        borderGlow: `hover:border-${formCategory === "games" ? "cyan" : formCategory === "lab" ? "emerald" : "purple"}-400/50`,
      };

      if (editingProject) {
        // Update existing
        const res = await fetch(`/api/projects/${editingProject.id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });

        if (res.ok) {
          showToast(`Project "${formTitle}" updated successfully!`);
          setIsModalOpen(false);
          fetchProjects();
        } else {
          const data = await res.json();
          setFormError(data.error || "Failed to update project");
        }
      } else {
        // Create new
        const res = await fetch("/api/projects", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });

        if (res.ok) {
          showToast(`New project "${formTitle}" deployed to database!`);
          setIsModalOpen(false);
          fetchProjects();
        } else {
          const data = await res.json();
          setFormError(data.error || "Failed to create project");
        }
      }
    } catch {
      setFormError("Network error while saving project.");
    } finally {
      setFormSubmitting(false);
    }
  };

  // Filter projects by category and search
  const filteredProjects = projects.filter((p) => {
    const matchesCategory =
      selectedCategory === "all" || p.category === selectedCategory;
    const matchesSearch =
      p.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      p.tagline.toLowerCase().includes(searchQuery.toLowerCase()) ||
      p.categoryLabel.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  // Loading screen during session check
  if (isAuthenticated === null) {
    return (
      <div className="min-h-screen bg-[#0a0a12] flex items-center justify-center text-cyan-400 font-mono text-sm">
        <div className="flex items-center gap-3">
          <div className="w-5 h-5 rounded-full border-2 border-cyan-400 border-t-transparent animate-spin" />
          <span>CHECKING SECURE COCKPIT CREDENTIALS...</span>
        </div>
      </div>
    );
  }

  // LOGIN SCREEN
  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-[#0a0a12] flex flex-col justify-center items-center px-4 relative overflow-hidden">
        {/* Background ambient lighting */}
        <div className="absolute top-1/4 left-1/3 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] pointer-events-none" />
        <div className="absolute bottom-1/4 right-1/3 w-96 h-96 bg-purple-600/10 rounded-full blur-[140px] pointer-events-none" />

        <div className="w-full max-w-md relative z-10">
          <div className="glass-panel p-8 sm:p-10 rounded-3xl border border-cyan-500/30 shadow-[0_0_50px_rgba(56,189,248,0.15)] space-y-6">
            
            {/* Header */}
            <div className="text-center space-y-2">
              <div className="w-12 h-12 rounded-2xl bg-cyan-400/10 border border-cyan-400/30 flex items-center justify-center text-cyan-400 mx-auto shadow-lg">
                <Lock className="w-6 h-6" />
              </div>
              <h1 className="text-2xl font-black font-mono text-white tracking-wider pt-2">
                AGHATIS STUDIO
              </h1>
              <p className="text-xs font-mono text-cyan-300 tracking-widest uppercase">
                ADMIN COMMAND CONSOLE // AUTHENTICATION
              </p>
            </div>

            {loginError && (
              <div className="p-3 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs font-mono flex items-center gap-2">
                <AlertCircle className="w-4 h-4 shrink-0" />
                <span>{loginError}</span>
              </div>
            )}

            <form onSubmit={handleLogin} className="space-y-4">
              <div>
                <label className="block text-xs font-mono uppercase tracking-wider text-slate-300 mb-1.5">
                  Commander Username
                </label>
                <input
                  type="text"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder="Enter username"
                  required
                  className="w-full px-4 py-2.5 rounded-xl bg-black/40 border border-white/15 text-white font-mono text-xs focus:outline-none focus:border-cyan-400 transition-colors"
                />
              </div>

              <div>
                <label className="block text-xs font-mono uppercase tracking-wider text-slate-300 mb-1.5">
                  Security Passkey
                </label>
                <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••••••"
                  required
                  className="w-full px-4 py-2.5 rounded-xl bg-black/40 border border-white/15 text-white font-mono text-xs focus:outline-none focus:border-cyan-400 transition-colors"
                />
              </div>

              <button
                type="submit"
                disabled={loginLoading}
                className="w-full py-3 rounded-xl bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-[0_0_20px_rgba(56,189,248,0.3)] hover:opacity-95 transition-opacity flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
              >
                {loginLoading ? (
                  <>
                    <div className="w-3.5 h-3.5 rounded-full border-2 border-slate-950 border-t-transparent animate-spin" />
                    <span>AUTHENTICATING WITH MYSQL...</span>
                  </>
                ) : (
                  <>
                    <Lock className="w-4 h-4" />
                    <span>Access Admin Console</span>
                  </>
                )}
              </button>
            </form>

            <div className="text-center pt-2">
              <a
                href="/"
                className="text-xs font-mono text-slate-500 hover:text-cyan-400 transition-colors inline-flex items-center gap-1.5"
              >
                <ArrowLeft className="w-3.5 h-3.5" />
                <span>Return to Public Website</span>
              </a>
            </div>

          </div>
        </div>
      </div>
    );
  }

  // AUTHENTICATED DASHBOARD
  return (
    <div className="min-h-screen bg-[#0a0a12] text-slate-100 flex flex-col font-sans selection:bg-cyan-500 selection:text-slate-950">
      
      {/* Toast Alert */}
      {toastMessage && (
        <div className="fixed top-6 right-6 z-50 px-4 py-3 rounded-xl glass-panel border border-cyan-400/50 text-cyan-300 font-mono text-xs flex items-center gap-2 shadow-[0_0_25px_rgba(56,189,248,0.25)] animate-in fade-in slide-in-from-top-2">
          <CheckCircle className="w-4 h-4 text-cyan-400" />
          <span>{toastMessage}</span>
        </div>
      )}

      {/* Top Navbar Header */}
      <header className="border-b border-white/10 bg-[#08080f]/90 backdrop-blur-xl sticky top-0 z-40 px-4 sm:px-8 py-3.5 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-400 to-indigo-500 flex items-center justify-center text-slate-950 font-black text-xs">
            AS
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="font-mono font-bold tracking-wider text-sm text-white">
                AGHATIS STUDIO
              </span>
              <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-cyan-500/20 text-cyan-300 border border-cyan-400/30">
                ADMIN COCKPIT
              </span>
            </div>
            <div className="flex items-center gap-1.5 text-[11px] font-mono text-emerald-400">
              <Database className="w-3 h-3" />
              <span>MySQL 103.155.224.244 • aghatis_studio_db</span>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <a
            href="/"
            target="_blank"
            rel="noopener noreferrer"
            className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass-panel text-xs font-mono text-slate-300 hover:text-white transition-colors"
          >
            <span>Live Website</span>
            <ExternalLink className="w-3.5 h-3.5" />
          </a>

          <button
            onClick={fetchProjects}
            title="Refresh database records"
            className="p-2 rounded-lg glass-panel text-slate-300 hover:text-white transition-colors cursor-pointer"
          >
            <RefreshCw className={`w-4 h-4 ${loadingProjects ? "animate-spin text-cyan-400" : ""}`} />
          </button>

          <button
            onClick={handleLogout}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-rose-950/40 border border-rose-500/30 text-rose-300 hover:text-white hover:bg-rose-900/50 text-xs font-mono transition-colors cursor-pointer"
          >
            <LogOut className="w-3.5 h-3.5" />
            <span className="hidden sm:inline">Sign Out</span>
          </button>
        </div>
      </header>

      {/* Main Container */}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
        
        {/* Metric Cards Row */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
          <div className="glass-card p-5 rounded-2xl border-white/10">
            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
              Total Fleet Projects
            </div>
            <div className="text-3xl font-black font-mono text-white mt-2">
              {projects.length}
            </div>
            <div className="text-[11px] font-mono text-cyan-400 mt-1">
              Active in Database
            </div>
          </div>

          <div className="glass-card p-5 rounded-2xl border-white/10">
            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
              Software Tools
            </div>
            <div className="text-3xl font-black font-mono text-cyan-400 mt-2">
              {projects.filter((p) => p.category === "software").length}
            </div>
            <div className="text-[11px] font-mono text-slate-400 mt-1">
              Native Workstations & Pipelines
            </div>
          </div>

          <div className="glass-card p-5 rounded-2xl border-white/10">
            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
              Original Games
            </div>
            <div className="text-3xl font-black font-mono text-purple-400 mt-2">
              {projects.filter((p) => p.category === "games").length}
            </div>
            <div className="text-[11px] font-mono text-slate-400 mt-1">
              Atmospheric Titles
            </div>
          </div>

          <div className="glass-card p-5 rounded-2xl border-white/10">
            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
              Lab R&D Prototypes
            </div>
            <div className="text-3xl font-black font-mono text-emerald-400 mt-2">
              {projects.filter((p) => p.category === "lab").length}
            </div>
            <div className="text-[11px] font-mono text-slate-400 mt-1">
              Procedural & Audio Experiments
            </div>
          </div>
        </div>

        {/* Action Controls & Filtering Bar */}
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 glass-panel p-4 rounded-2xl border-white/10">
          {/* Category Filter Pills */}
          <div className="flex items-center gap-2 overflow-x-auto w-full sm:w-auto pb-1 sm:pb-0">
            {[
              { id: "all", label: "All Projects" },
              { id: "software", label: "Software" },
              { id: "games", label: "Games" },
              { id: "lab", label: "Lab R&D" },
            ].map((cat) => (
              <button
                key={cat.id}
                onClick={() => setSelectedCategory(cat.id)}
                className={`px-3.5 py-1.5 rounded-xl font-mono text-xs uppercase tracking-wider transition-colors cursor-pointer shrink-0 ${
                  selectedCategory === cat.id
                    ? "bg-cyan-500/20 border border-cyan-400/50 text-cyan-300 font-bold"
                    : "text-slate-400 hover:text-white"
                }`}
              >
                {cat.label}
              </button>
            ))}
          </div>

          {/* Search Input & Add Button */}
          <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
            <div className="relative flex-1 sm:w-64">
              <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search projects..."
                className="w-full pl-9 pr-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-xs font-mono text-white placeholder-slate-500 focus:outline-none focus:border-cyan-400"
              />
            </div>

            <button
              onClick={openCreateModal}
              className="px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-lg hover:opacity-90 transition-opacity flex items-center gap-1.5 cursor-pointer shrink-0"
            >
              <Plus className="w-4 h-4" />
              <span>Deploy Project</span>
            </button>
          </div>
        </div>

        {/* Project Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredProjects.map((p) => (
            <div
              key={p.id}
              className="glass-card rounded-2xl p-6 border-white/10 flex flex-col justify-between space-y-4 hover:border-cyan-500/30 transition-all group"
            >
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-white/5 border border-white/10 text-cyan-300">
                    {p.categoryLabel}
                  </span>
                  <span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-indigo-950/60 border border-indigo-400/20 text-indigo-300">
                    {p.status}
                  </span>
                </div>

                <div>
                  <h3 className="text-lg font-bold font-mono text-white group-hover:text-cyan-300 transition-colors">
                    {p.title}
                  </h3>
                  <div className="text-[11px] font-mono text-slate-500">
                    ID: {p.id} • Target: {p.releaseTarget}
                  </div>
                  <p className="text-xs text-slate-400 line-clamp-2 mt-2">
                    {p.tagline}
                  </p>
                </div>

                {/* Stack Badges */}
                <div className="flex flex-wrap gap-1.5 pt-1">
                  {p.stack?.slice(0, 3).map((item) => (
                    <span
                      key={item}
                      className="text-[10px] font-mono px-2 py-0.5 rounded bg-white/5 text-slate-400"
                    >
                      {item}
                    </span>
                  ))}
                  {p.stack?.length > 3 && (
                    <span className="text-[10px] font-mono text-slate-500">
                      +{p.stack.length - 3} more
                    </span>
                  )}
                </div>
              </div>

              {/* Action Buttons */}
              <div className="pt-4 border-t border-white/10 flex items-center justify-between">
                <div className="text-[11px] font-mono text-slate-500">
                  {p.features?.length || 0} Features
                </div>

                <div className="flex items-center gap-2">
                  <button
                    onClick={() => openEditModal(p)}
                    className="p-2 rounded-lg glass-panel hover:border-cyan-400/50 text-slate-300 hover:text-cyan-300 transition-colors cursor-pointer"
                    title="Edit project"
                  >
                    <Edit className="w-3.5 h-3.5" />
                  </button>
                  <button
                    onClick={() => handleDelete(p.id, p.title)}
                    className="p-2 rounded-lg bg-rose-950/30 hover:bg-rose-900/50 text-rose-400 transition-colors cursor-pointer"
                    title="Delete project"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            </div>
          ))}

          {filteredProjects.length === 0 && (
            <div className="col-span-full py-16 text-center text-slate-500 font-mono text-xs">
              NO PROJECTS FOUND IN THIS SECTOR
            </div>
          )}
        </div>

      </main>

      {/* CREATE / EDIT MODAL */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-xl overflow-y-auto">
          <div className="relative w-full max-w-2xl bg-[#0e0e1c] border border-cyan-500/30 rounded-3xl p-6 sm:p-8 shadow-2xl my-8 space-y-6">
            
            {/* Modal Header */}
            <div className="flex items-center justify-between pb-4 border-b border-white/10">
              <div className="space-y-1">
                <h2 className="text-xl font-bold font-mono text-white">
                  {editingProject ? `Edit Project: ${editingProject.title}` : "Deploy New Original Project"}
                </h2>
                <p className="text-xs font-mono text-cyan-400">
                  Data will be committed directly to MySQL database
                </p>
              </div>
              <button
                onClick={() => setIsModalOpen(false)}
                className="p-2 rounded-full glass-panel text-slate-400 hover:text-white transition-colors cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {formError && (
              <div className="p-3 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs font-mono flex items-center gap-2">
                <AlertCircle className="w-4 h-4 shrink-0" />
                <span>{formError}</span>
              </div>
            )}

            <form onSubmit={handleSaveProject} className="space-y-4">
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Project ID / Slug
                  </label>
                  <input
                    type="text"
                    value={formId}
                    onChange={(e) => setFormId(e.target.value)}
                    placeholder="e.g. aetheria"
                    disabled={!!editingProject}
                    required
                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400 disabled:opacity-50"
                  />
                </div>

                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Project Title
                  </label>
                  <input
                    type="text"
                    value={formTitle}
                    onChange={(e) => setFormTitle(e.target.value)}
                    placeholder="e.g. Aetheria: Chrono Drift"
                    required
                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Category Track
                  </label>
                  <select
                    value={formCategory}
                    onChange={(e) => setFormCategory(e.target.value as "software" | "games" | "lab")}
                    className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  >
                    <option value="software">Software Products</option>
                    <option value="games">Original Games</option>
                    <option value="lab">Experimental Lab</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Category Sub-label
                  </label>
                  <input
                    type="text"
                    value={formCategoryLabel}
                    onChange={(e) => setFormCategoryLabel(e.target.value)}
                    placeholder="e.g. Tactical Flight RPG"
                    required
                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  />
                </div>

                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Status Badge
                  </label>
                  <input
                    type="text"
                    value={formStatus}
                    onChange={(e) => setFormStatus(e.target.value)}
                    placeholder="e.g. In Active Dev"
                    required
                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Status Type
                  </label>
                  <select
                    value={formStatusType}
                    onChange={(e) => setFormStatusType(e.target.value as "active" | "alpha" | "prototype" | "upcoming")}
                    className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  >
                    <option value="active">Active</option>
                    <option value="alpha">Alpha</option>
                    <option value="prototype">Prototype</option>
                    <option value="upcoming">Upcoming</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Target Release
                  </label>
                  <input
                    type="text"
                    value={formReleaseTarget}
                    onChange={(e) => setFormReleaseTarget(e.target.value)}
                    placeholder="e.g. Alpha 2027"
                    required
                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  />
                </div>

                <div>
                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                    Visual Icon
                  </label>
                  <select
                    value={formIconName}
                    onChange={(e) => setFormIconName(e.target.value)}
                    className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                  >
                    <option value="Terminal">Terminal (Software)</option>
                    <option value="Gamepad2">Gamepad2 (Games)</option>
                    <option value="FlaskConical">FlaskConical (Lab)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                  Tagline (1 sentence hook)
                </label>
                <input
                  type="text"
                  value={formTagline}
                  onChange={(e) => setFormTagline(e.target.value)}
                  placeholder="Atmospheric spaceflight RPG driven by Newtonian physics & relativistic time mechanics."
                  required
                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                />
              </div>

              <div>
                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                  Card Short Description
                </label>
                <textarea
                  value={formDescription}
                  onChange={(e) => setFormDescription(e.target.value)}
                  rows={2}
                  placeholder="Pilot handcrafted atmospheric ships through uncharted cosmic sectors..."
                  required
                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                />
              </div>

              <div>
                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                  Modal Long Description & Manifesto
                </label>
                <textarea
                  value={formLongDescription}
                  onChange={(e) => setFormLongDescription(e.target.value)}
                  rows={3}
                  placeholder="Deep dive narrative and design philosophy..."
                  required
                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                />
              </div>

              <div>
                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                  Key Architectural Features (1 per line)
                </label>
                <textarea
                  value={formFeatures}
                  onChange={(e) => setFormFeatures(e.target.value)}
                  rows={3}
                  placeholder="True orbital mechanics and gravitational slingshots&#10;Non-linear stellar narrative&#10;Procedurally synthesized nebula volumetric rendering"
                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                />
              </div>

              <div>
                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
                  Tech Stack (Comma-separated)
                </label>
                <input
                  type="text"
                  value={formStack}
                  onChange={(e) => setFormStack(e.target.value)}
                  placeholder="Godot 4.3, C++ GDExtension, Bespoke GLSL, FMOD"
                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
                />
              </div>

              <div className="flex items-center justify-end gap-3 pt-4 border-t border-white/10">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="px-4 py-2.5 rounded-xl glass-panel text-xs font-mono text-slate-400 hover:text-white transition-colors cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={formSubmitting}
                  className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-lg hover:opacity-95 transition-opacity cursor-pointer disabled:opacity-50"
                >
                  {formSubmitting ? "Committing to MySQL..." : editingProject ? "Save Changes" : "Deploy Project"}
                </button>
              </div>

            </form>
          </div>
        </div>
      )}

    </div>
  );
}