import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { aethexToast } from "@/lib/aethex-toast";
import { supabase } from "@/lib/supabase";
import { Plus, Users, Calendar, CheckCircle } from "lucide-react";

const API_BASE = import.meta.env.VITE_API_BASE || "";

interface Sprint {
  id: string;
  project_id: string;
  sprint_number: number;
  title: string;
  description?: string;
  goal?: string;
  phase: "planning" | "active" | "completed" | "cancelled";
  status: "pending" | "active" | "on_hold" | "completed";
  start_date?: string;
  end_date?: string;
  planned_velocity?: number;
  actual_velocity?: number;
  gameforge_projects?: { name: string };
  gameforge_sprint_members?: Array<{ user_id: string }>;
}

interface SprintManagerProps {
  projectId: string;
  projectName?: string;
  isProjectLead?: boolean;
  onSprintJoined?: (sprint: Sprint) => void;
}

export default function SprintManager({
  projectId,
  projectName,
  isProjectLead = false,
  onSprintJoined,
}: SprintManagerProps) {
  const [sprints, setSprints] = useState<Sprint[]>([]);
  const [loading, setLoading] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [userSprints, setUserSprints] = useState<Set<string>>(new Set());

  const [formData, setFormData] = useState({
    title: "",
    description: "",
    goal: "",
    startDate: "",
    endDate: "",
    plannedVelocity: "",
  });

  useEffect(() => {
    loadSprints();
  }, [projectId]);

  const loadSprints = async () => {
    setLoading(true);
    try {
      const {
        data: { session },
      } = await supabase.auth.getSession();
      const token = session?.access_token;
      if (!token) throw new Error("No auth token");

      const res = await fetch(
        `${API_BASE}/api/gameforge/sprint?projectId=${projectId}`,
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      );

      if (res.ok) {
        const data = await res.json();
        setSprints(Array.isArray(data) ? data : []);

        // Track which sprints user is already in
        const userSprintIds = new Set(
          data
            .filter((sprint: Sprint) =>
              sprint.gameforge_sprint_members?.some(
                (m: any) => m.user_id === session?.user?.id,
              ),
            )
            .map((s: Sprint) => s.id),
        );
        setUserSprints(userSprintIds);
      }
    } catch (error) {
      console.error("Failed to load sprints:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleCreateSprint = async () => {
    if (!formData.title.trim()) {
      aethexToast.error({
        title: "Error",
        description: "Sprint title is required",
      });
      return;
    }

    try {
      const {
        data: { session },
      } = await supabase.auth.getSession();
      const token = session?.access_token;
      if (!token) throw new Error("No auth token");

      const res = await fetch(`${API_BASE}/api/gameforge/sprint`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          projectId,
          title: formData.title,
          description: formData.description,
          goal: formData.goal,
          startDate: formData.startDate,
          endDate: formData.endDate,
          plannedVelocity: formData.plannedVelocity
            ? parseInt(formData.plannedVelocity)
            : null,
        }),
      });

      if (!res.ok) {
        throw new Error(await res.text());
      }

      const newSprint = await res.json();
      setSprints([newSprint, ...sprints]);
      setCreateOpen(false);
      setFormData({
        title: "",
        description: "",
        goal: "",
        startDate: "",
        endDate: "",
        plannedVelocity: "",
      });

      aethexToast.success({
        title: "Sprint created",
        description: `Sprint ${newSprint.sprint_number}: ${newSprint.title}`,
      });
    } catch (error: any) {
      aethexToast.error({
        title: "Failed to create sprint",
        description: error.message,
      });
    }
  };

  const handleJoinSprint = async (sprintId: string) => {
    try {
      const {
        data: { session },
      } = await supabase.auth.getSession();
      const token = session?.access_token;
      if (!token) throw new Error("No auth token");

      const res = await fetch(`${API_BASE}/api/gameforge/sprint-join`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ sprintId }),
      });

      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.error || "Failed to join sprint");
      }

      // Add to user sprints set and reload
      setUserSprints((prev) => new Set([...prev, sprintId]));

      const sprint = sprints.find((s) => s.id === sprintId);
      if (sprint && onSprintJoined) {
        onSprintJoined(sprint);
      }

      aethexToast.success({
        title: "Joined sprint",
        description: "You've been added to the sprint",
      });
    } catch (error: any) {
      aethexToast.error({
        title: "Failed to join sprint",
        description: error.message,
      });
    }
  };

  const getPhaseColor = (phase: string) => {
    switch (phase) {
      case "planning":
        return "bg-blue-500/20 text-blue-200 border-blue-500/40";
      case "active":
        return "bg-green-500/20 text-green-200 border-green-500/40";
      case "completed":
        return "bg-purple-500/20 text-purple-200 border-purple-500/40";
      default:
        return "bg-gray-500/20 text-gray-200 border-gray-500/40";
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-600";
      case "completed":
        return "bg-blue-600";
      case "on_hold":
        return "bg-orange-600";
      default:
        return "bg-gray-600";
    }
  };

  return (
    <div className="space-y-6">
      {/* Create Sprint Button (Project Leads Only) */}
      {isProjectLead && (
        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
          <DialogTrigger asChild>
            <Button className="gap-2 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700">
              <Plus className="h-4 w-4" />
              Create Sprint
            </Button>
          </DialogTrigger>
          <DialogContent className="bg-slate-950 border-purple-500/20">
            <DialogHeader>
              <DialogTitle>Create New Sprint</DialogTitle>
              <DialogDescription>
                Create a new sprint for {projectName || "this project"}
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-4">
              <div>
                <Label htmlFor="sprint-title">Sprint Title</Label>
                <Input
                  id="sprint-title"
                  value={formData.title}
                  onChange={(e) =>
                    setFormData({ ...formData, title: e.target.value })
                  }
                  placeholder="e.g., Sprint 1: Core Mechanics"
                  className="bg-slate-900 border-slate-700"
                />
              </div>

              <div>
                <Label htmlFor="sprint-goal">Goal (Optional)</Label>
                <Input
                  id="sprint-goal"
                  value={formData.goal}
                  onChange={(e) =>
                    setFormData({ ...formData, goal: e.target.value })
                  }
                  placeholder="e.g., Implement character movement and combat"
                  className="bg-slate-900 border-slate-700"
                />
              </div>

              <div>
                <Label htmlFor="sprint-description">Description</Label>
                <Textarea
                  id="sprint-description"
                  value={formData.description}
                  onChange={(e) =>
                    setFormData({ ...formData, description: e.target.value })
                  }
                  placeholder="Sprint details and focus areas..."
                  className="bg-slate-900 border-slate-700 resize-none h-20"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="start-date">Start Date</Label>
                  <Input
                    id="start-date"
                    type="date"
                    value={formData.startDate}
                    onChange={(e) =>
                      setFormData({ ...formData, startDate: e.target.value })
                    }
                    className="bg-slate-900 border-slate-700"
                  />
                </div>
                <div>
                  <Label htmlFor="end-date">End Date</Label>
                  <Input
                    id="end-date"
                    type="date"
                    value={formData.endDate}
                    onChange={(e) =>
                      setFormData({ ...formData, endDate: e.target.value })
                    }
                    className="bg-slate-900 border-slate-700"
                  />
                </div>
              </div>

              <div>
                <Label htmlFor="velocity">Planned Velocity (Optional)</Label>
                <Input
                  id="velocity"
                  type="number"
                  value={formData.plannedVelocity}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      plannedVelocity: e.target.value,
                    })
                  }
                  placeholder="Story points or tasks"
                  className="bg-slate-900 border-slate-700"
                />
              </div>

              <Button
                onClick={handleCreateSprint}
                className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
              >
                Create Sprint
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      )}

      {/* Sprints List */}
      <div className="space-y-3">
        {loading ? (
          <div className="text-center py-8 text-slate-400">
            Loading sprints...
          </div>
        ) : sprints.length === 0 ? (
          <Card className="border-slate-700/50 bg-slate-900/30">
            <CardContent className="pt-6">
              <p className="text-slate-300 text-center">
                {isProjectLead
                  ? "No sprints yet. Create one to get started!"
                  : "No sprints available to join yet."}
              </p>
            </CardContent>
          </Card>
        ) : (
          sprints.map((sprint) => {
            const isMember = userSprints.has(sprint.id);
            const isActive = sprint.status === "active";

            return (
              <Card
                key={sprint.id}
                className="border-slate-700/50 bg-slate-900/50 hover:border-purple-500/40 transition"
              >
                <CardContent className="pt-6">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <h3 className="text-lg font-semibold text-white">
                          Sprint {sprint.sprint_number}: {sprint.title}
                        </h3>
                        <Badge className={`${getPhaseColor(sprint.phase)}`}>
                          {sprint.phase}
                        </Badge>
                        {isActive && (
                          <Badge className={getStatusColor(sprint.status)}>
                            {sprint.status}
                          </Badge>
                        )}
                      </div>

                      {sprint.goal && (
                        <p className="text-sm text-slate-400 mb-3">
                          Goal: {sprint.goal}
                        </p>
                      )}

                      {sprint.description && (
                        <p className="text-sm text-slate-300 mb-3">
                          {sprint.description}
                        </p>
                      )}

                      <div className="flex flex-wrap gap-3 text-xs text-slate-400">
                        {sprint.start_date && (
                          <div className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {new Date(sprint.start_date).toLocaleDateString()}
                          </div>
                        )}
                        {sprint.end_date && (
                          <div className="flex items-center gap-1">
                            → {new Date(sprint.end_date).toLocaleDateString()}
                          </div>
                        )}
                        <div className="flex items-center gap-1">
                          <Users className="h-3 w-3" />
                          {sprint.gameforge_sprint_members?.length || 0} members
                        </div>
                      </div>
                    </div>

                    <div className="flex flex-col gap-2">
                      {isMember ? (
                        <Badge className="bg-green-600 text-white">
                          <CheckCircle className="h-3 w-3 mr-1" />
                          Joined
                        </Badge>
                      ) : (
                        <Button
                          size="sm"
                          onClick={() => handleJoinSprint(sprint.id)}
                          className="bg-blue-600 hover:bg-blue-700"
                        >
                          Join
                        </Button>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })
        )}
      </div>
    </div>
  );
}