"use client";

import { useEffect, useMemo, useState } from "react";
import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Rocket,
  RotateCcw,
  Eye,
  MoreVertical,
  Plus,
  Play,
  Pause,
  Trash,
} from "lucide-react";
import { Application, Deployment } from "@/lib/types";
import { getDeployments } from "@/lib/dockship/deploy";
import { getApps } from "@/lib/dockship/application";
import { cn } from "@/lib/utils";
import DeployAppDialog from "@/components/dialogs/DeployApp";
import { useAsync, useAsyncInterval } from "@/hooks/use-async";
import RemoveDialog from "@/components/dialogs/Remove";

const statusDot = {
  running: "bg-chart-2",
  pending: "bg-chart-1",
  stopped: "bg-slate-400 dark:bg-slate-600",
} as const;

export default function DeploymentsPage() {
  const { value: apps } = useAsyncInterval([], getApps, 5000);

  const { value: deployments, loading } = useAsync([], getDeployments, [apps]);

  const appNameByContainer = useMemo(() => {
    const map = new Map<string, string>();
    for (const app of apps) {
      for (const container of app.deployments) {
        map.set(container, app.name);
      }
    }
    return map;
  }, [apps]);

  return (
    <DashboardLayout
      title="Deployments"
      subtitle="Deployment history and management"
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <Badge>
          {loading
            ? "Loading…"
            : `${deployments.length} deployment${deployments.length > 0 && "s"}`}
        </Badge>

        <DeployAppDialog>
          <Button size="sm" className="gap-2">
            <Plus className="w-4 h-4" />
            New Deployment
          </Button>
        </DeployAppDialog>
      </div>

      <div className="divide-y divide-border">
        {deployments.map((dep) => {
          const appName =
            appNameByContainer.get(dep.container) ?? "Unknown app";

          return (
            <Card key={`${dep.image}-${dep.container ?? "latest"}`}>
              <CardContent>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span
                      className={cn(
                        "size-2 rounded-full animate-pulse",
                        statusDot[dep.status as keyof typeof statusDot] ??
                          statusDot.stopped,
                      )}
                    />
                    <CardTitle>{appName}</CardTitle>
                    <CardDescription className="flex gap-3">
                      {dep.ports.map(([to, from]) => (
                        <span key={`${from}-${to}`}>
                          {from} → {to}
                        </span>
                      ))}
                    </CardDescription>
                  </div>
                  <p className="hidden xl:block text-muted-foreground">
                    {dep.image}
                  </p>
                  <div className="flex justify-end gap-1">
                    <Button
                      variant="ghost"
                      size="icon-sm"
                      disabled={dep.status === "pending"}
                    >
                      {dep.status === "running" ? (
                        <Pause className="w-3 h-3" />
                      ) : (
                        <Play className="w-3 h-3" />
                      )}
                    </Button>
                    <RemoveDialog remove={() => {}} />
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </DashboardLayout>
  );
}