import { useState, useRef } from "react";
import { Upload, Trash2 } from "lucide-react";

import { useServerMissions, useUploadMission, useDeleteMission } from "@/hooks/useServerDetail";
import { useAuthStore } from "@/store/auth.store";
import { useUIStore } from "@/store/ui.store";
import { logger } from "@/lib/logger";

interface MissionListProps {
  serverId: number;
}

export function MissionList({ serverId }: MissionListProps) {
  const isAdmin = useAuthStore((s) => s.user?.role === "admin");
  const addNotification = useUIStore((s) => s.addNotification);
  const { data: missionsData, isLoading } = useServerMissions(serverId);
  const uploadMission = useUploadMission(serverId);
  const deleteMission = useDeleteMission(serverId);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    try {
      await uploadMission.mutateAsync(file);
      addNotification({ type: "success", message: `Mission ${file.name} uploaded` });
    } catch (err) {
      logger.error("MissionList", "Failed to upload mission: %s", err);
      addNotification({ type: "error", message: "Failed to upload mission" });
    }
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  const handleDelete = async (filename: string) => {
    try {
      await deleteMission.mutateAsync(filename);
      addNotification({ type: "info", message: `Mission ${filename} deleted` });
    } catch (err) {
      logger.error("MissionList", "Failed to delete mission %s: %s", filename, err);
      addNotification({ type: "error", message: `Failed to delete ${filename}` });
    }
  };

  if (isLoading) {
    return <div className="text-text-muted text-sm p-4">Loading missions...</div>;
  }

  const missions = missionsData?.missions ?? [];

  return (
    <div data-testid="mission-list">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-text-primary font-semibold">
          Missions ({missionsData?.total ?? 0})
        </h3>
        {isAdmin && (
          <label className="btn-primary flex items-center gap-1.5 text-sm cursor-pointer">
            <Upload size={14} />
            Upload .pbo
            <input
              ref={fileInputRef}
              type="file"
              accept=".pbo"
              onChange={handleUpload}
              className="hidden"
              disabled={uploadMission.isPending}
            />
          </label>
        )}
      </div>

      {uploadMission.isPending && (
        <div className="text-text-secondary text-sm mb-3 animate-pulse">Uploading mission...</div>
      )}

      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-surface-overlay">
              <th className="text-left text-text-muted font-medium px-3 py-2">Filename</th>
              <th className="text-left text-text-muted font-medium px-3 py-2">Mission</th>
              <th className="text-right text-text-muted font-medium px-3 py-2">Size</th>
              {isAdmin && (
                <th className="text-right text-text-muted font-medium px-3 py-2">Actions</th>
              )}
            </tr>
          </thead>
          <tbody>
            {missions.length === 0 ? (
              <tr>
                <td colSpan={isAdmin ? 4 : 3} className="text-text-muted text-center py-6">
                  No missions uploaded
                </td>
              </tr>
            ) : (
              missions.map((mission) => (
                <tr key={mission.filename} className="border-b border-surface-overlay/50 hover:bg-surface-overlay/30">
                  <td className="font-mono text-text-primary text-xs px-3 py-2">{mission.filename}</td>
                  <td className="text-text-secondary px-3 py-2">{mission.name}</td>
                  <td className="text-right font-mono text-text-muted text-xs px-3 py-2">
                    {formatSize(mission.size_bytes)}
                  </td>
                  {isAdmin && (
                    <td className="text-right px-3 py-2">
                      <button
                        onClick={() => handleDelete(mission.filename)}
                        disabled={deleteMission.isPending}
                        className="btn-ghost text-status-crashed"
                        aria-label={`Delete ${mission.filename}`}
                      >
                        <Trash2 size={14} />
                      </button>
                    </td>
                  )}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function formatSize(bytes: number): string {
  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${bytes} B`;
}