"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ArrowLeft, Users, Loader2 } from "lucide-react";
import { createTeam } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import { useToast } from "@/components/toast";

export default function CreateTeamPage() {
  const router = useRouter();
  const { auth } = useAuth();
  const { showToast } = useToast();

  const [orgName, setOrgName] = useState("");
  const [teamName, setTeamName] = useState("");
  const [description, setDescription] = useState("");
  const [creating, setCreating] = useState(false);

  const handleCreate = async () => {
    if (!orgName.trim() || !teamName.trim()) return;
    setCreating(true);
    try {
      const result = await createTeam(orgName.trim(), teamName.trim(), description.trim());
      if (result) {
        const teamSlug = (result as any).slug || teamName.trim().toLowerCase().replace(/\s+/g, "-");
        showToast(`Team "${teamName.trim()}" created`);
        router.push(`/teams/${orgName.trim()}/${teamSlug}`);
      } else {
        showToast("Failed to create team", "error");
      }
    } catch {
      showToast("Failed to create team", "error");
    } finally {
      setCreating(false);
    }
  };

  return (
    <div className="min-h-screen bg-background text-text-primary">
      <div className="max-w-lg mx-auto px-6 py-8">
        {/* Header */}
        <div className="mb-8">
          <Link
            href="/"
            className="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-text-primary transition-colors mb-4"
          >
            <ArrowLeft size={14} />
            Back
          </Link>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-accent/20 text-accent flex items-center justify-center">
              <Users size={20} />
            </div>
            <h1 className="text-xl font-semibold">Create Team</h1>
          </div>
        </div>

        {/* Form */}
        <div className="space-y-5">
          <div>
            <label className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1.5 block">
              Organization
            </label>
            <input
              type="text"
              value={orgName}
              onChange={(e) => setOrgName(e.target.value)}
              placeholder={auth?.user?.login || "my-org"}
              className="w-full px-3 py-2 bg-surface border border-border rounded-md text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent"
            />
            <p className="text-xs text-text-muted mt-1">
              The organization this team belongs to. Will be auto-created if it does not exist.
            </p>
          </div>

          <div>
            <label className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1.5 block">
              Team Name
            </label>
            <input
              type="text"
              value={teamName}
              onChange={(e) => setTeamName(e.target.value)}
              placeholder="core-agents"
              className="w-full px-3 py-2 bg-surface border border-border rounded-md text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent"
            />
          </div>

          <div>
            <label className="text-[11px] font-medium text-text-muted uppercase tracking-wider mb-1.5 block">
              Description
            </label>
            <input
              type="text"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Optional description"
              className="w-full px-3 py-2 bg-surface border border-border rounded-md text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent"
            />
          </div>

          <button
            onClick={handleCreate}
            disabled={creating || !orgName.trim() || !teamName.trim()}
            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-md bg-accent text-white hover:bg-accent-hover disabled:opacity-50 transition-colors"
          >
            {creating ? (
              <>
                <Loader2 size={14} className="animate-spin" />
                Creating...
              </>
            ) : (
              "Create Team"
            )}
          </button>
        </div>
      </div>
    </div>
  );
}