aethex-forge/client/pages/ProjectsNew.tsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import LoadingScreen from "@/components/LoadingScreen";
import { useAuth } from "@/contexts/AuthContext";
import { aethexToast } from "@/lib/aethex-toast";
import { aethexProjectService, aethexAchievementService } from "@/lib/aethex-database-adapter";

export default function ProjectsNew() {
  const navigate = useNavigate();
  const { user } = useAuth();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [technologies, setTechnologies] = useState("");
  const [githubUrl, setGithubUrl] = useState("");
  const [liveUrl, setLiveUrl] = useState("");
  const [status, setStatus] = useState<"planning" | "in_progress" | "completed" | "on_hold">("planning");
  const [isSubmitting, setIsSubmitting] = useState(false);

  if (!user) {
    return (
      <LoadingScreen
        message="Please sign in to create a project..."
        showProgress={true}
        duration={800}
      />
    );
  }

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    if (!title.trim()) {
      aethexToast.error({ title: "Title required", description: "Please provide a project title." });
      return;
    }

    setIsSubmitting(true);

    try {
      const techArray = technologies
        .split(",")
        .map((t) => t.trim())
        .filter(Boolean);

      const project = await aethexProjectService.createProject({
        user_id: user.id,
        title: title.trim(),
        description: description.trim(),
        status,
        technologies: techArray,
        github_url: githubUrl.trim() || undefined,
        live_url: liveUrl.trim() || undefined,
      } as any);

      if (project) {
        try {
          await aethexAchievementService.checkAndAwardProjectAchievements(user.id);
        } catch {}
        aethexToast.success({ title: "Project created", description: "Your project has been created." });
        navigate("/dashboard");
      } else {
        throw new Error("Project creation failed");
      }
    } catch (err: any) {
      console.error("Error creating project:", err);
      aethexToast.error({ title: "Failed to create project", description: err?.message || "Please try again." });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Layout>
      <div className="min-h-screen py-8">
        <div className="container mx-auto px-4 max-w-3xl">
          <h1 className="text-2xl font-bold mb-4">Start a New Project</h1>

          <form onSubmit={handleSubmit} className="space-y-4 bg-card/50 border-border/50 p-6 rounded-lg">
            <div>
              <Label htmlFor="title">Project Title</Label>
              <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. Decentralized Chat App" />
            </div>

            <div>
              <Label htmlFor="description">Description</Label>
              <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Short description of the project" />
            </div>

            <div>
              <Label htmlFor="technologies">Technologies (comma separated)</Label>
              <Input id="technologies" value={technologies} onChange={(e) => setTechnologies(e.target.value)} placeholder="React, Node.js, Supabase, Typescript" />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="github">GitHub URL</Label>
                <Input id="github" value={githubUrl} onChange={(e) => setGithubUrl(e.target.value)} placeholder="https://github.com/your/repo" />
              </div>

              <div>
                <Label htmlFor="live">Live URL</Label>
                <Input id="live" value={liveUrl} onChange={(e) => setLiveUrl(e.target.value)} placeholder="https://example.com" />
              </div>
            </div>

            <div>
              <Label htmlFor="status">Status</Label>
              <select id="status" value={status} onChange={(e) => setStatus(e.target.value as any)} className="w-full p-2 rounded border border-border/30 bg-background">
                <option value="planning">Planning</option>
                <option value="in_progress">In Progress</option>
                <option value="completed">Completed</option>
                <option value="on_hold">On Hold</option>
              </select>
            </div>

            <div className="flex items-center space-x-3">
              <Button type="submit" disabled={isSubmitting} className="hover-lift">
                {isSubmitting ? "Creating..." : "Create Project"}
              </Button>
              <Button type="button" variant="outline" onClick={() => navigate(-1)}>
                Cancel
              </Button>
            </div>
          </form>
        </div>
      </div>
    </Layout>
  );
}