"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import type { ContentTrack, UserRole } from "@/lib/types";
import { TRACK_LABELS, TRACK_ORDER as DISPLAY_TRACK_ORDER } from "@/lib/track-display";

const TRACK_ORDER: ContentTrack[] = [...DISPLAY_TRACK_ORDER] as ContentTrack[];

interface TrackConfig {
  id: string;
  track: ContentTrack;
  platformWeights: Record<string, number>;
  weeklySlotCap: number;
  requiresApproval: boolean;
  bestWindows: { day: string; hour: number }[];
  isActive: boolean;
}

export default function TrackSettingsPage() {
  const { data: session } = useSession();
  const router = useRouter();
  const role = (session?.user as { role?: UserRole })?.role;
  const [configs, setConfigs] = useState<TrackConfig[]>([]);
  const [saving, setSaving] = useState<string | null>(null);
  const [edits, setEdits] = useState<Record<string, Partial<TrackConfig>>>({});

  useEffect(() => {
    if (role && role !== "ADMIN") router.replace("/dashboard");
  }, [role, router]);

  useEffect(() => {
    fetch("/api/v1/tracks")
      .then((r) => (r.ok ? r.json() : []))
      .then((data: TrackConfig[]) => setConfigs(data))
      .catch(() => {});
  }, []);

  const handleSave = async (track: ContentTrack) => {
    setSaving(track);
    const changes = edits[track];
    if (!changes) {
      setSaving(null);
      return;
    }
    try {
      const res = await fetch(`/api/v1/tracks/${track}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(changes),
      });
      if (res.ok) {
        const updated = await res.json();
        setConfigs((prev) => prev.map((c) => (c.track === track ? updated : c)));
        setEdits((prev) => {
          const next = { ...prev };
          delete next[track];
          return next;
        });
      }
    } catch {
      // ignore
    }
    setSaving(null);
  };

  const updateEdit = (track: ContentTrack, field: string, value: unknown) => {
    setEdits((prev) => ({
      ...prev,
      [track]: { ...prev[track], [field]: value },
    }));
  };

  if (role && role !== "ADMIN") return null;

  return (
    <div className="space-y-6">
      <div className="border-b border-gray-100 -mx-4 md:-mx-6 -mt-4 md:-mt-6 px-8 py-5 mb-6">
        <h1 className="text-2xl font-semibold text-gray-900">Track Configuration</h1>
        <p className="text-sm text-gray-500">Manage publishing tracks and queue rules</p>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200">
              <th className="text-left py-2 px-3 font-medium text-gray-500">Track</th>
              <th className="text-left py-2 px-3 font-medium text-gray-500">Weekly Cap</th>
              <th className="text-left py-2 px-3 font-medium text-gray-500">Requires Approval</th>
              <th className="text-left py-2 px-3 font-medium text-gray-500">Platform Weights</th>
              <th className="text-left py-2 px-3 font-medium text-gray-500">Best Windows</th>
              <th className="text-left py-2 px-3 font-medium text-gray-500"></th>
            </tr>
          </thead>
          <tbody>
            {[...configs].sort((a, b) => {
              const ai = TRACK_ORDER.indexOf(a.track);
              const bi = TRACK_ORDER.indexOf(b.track);
              return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
            }).map((config) => {
              const edited = edits[config.track] ?? {};
              const cap = edited.weeklySlotCap ?? config.weeklySlotCap;
              const approval = edited.requiresApproval ?? config.requiresApproval;
              const hasChanges = Object.keys(edited).length > 0;

              return (
                <tr key={config.track} className="border-b border-gray-100">
                  <td className="py-3 px-3">
                    <Badge className="text-xs">{TRACK_LABELS[config.track] ?? config.track}</Badge>
                  </td>
                  <td className="py-3 px-3">
                    <Input
                      type="number"
                      min={0}
                      value={cap}
                      onChange={(e) =>
                        updateEdit(config.track, "weeklySlotCap", parseInt(e.target.value) || 0)
                      }
                      className="w-20 h-8 text-sm"
                    />
                  </td>
                  <td className="py-3 px-3">
                    <button
                      type="button"
                      onClick={() => updateEdit(config.track, "requiresApproval", !approval)}
                      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
                        approval ? "bg-blue-500" : "bg-gray-300"
                      }`}
                    >
                      <span
                        className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${
                          approval ? "translate-x-4.5" : "translate-x-1"
                        }`}
                        style={{ transform: approval ? "translateX(18px)" : "translateX(3px)" }}
                      />
                    </button>
                  </td>
                  <td className="py-3 px-3">
                    <div className="flex flex-wrap gap-1.5">
                      {Object.entries(
                        (edited.platformWeights ?? config.platformWeights) as Record<string, number>
                      ).map(([platform, weight]) => (
                        <div key={platform} className="flex items-center gap-1">
                          <span className="text-xs text-gray-500">{platform}</span>
                          <Input
                            type="number"
                            min={0}
                            max={100}
                            value={weight}
                            onChange={(e) => {
                              const current = (edited.platformWeights ?? config.platformWeights) as Record<string, number>;
                              updateEdit(config.track, "platformWeights", {
                                ...current,
                                [platform]: parseInt(e.target.value) || 0,
                              });
                            }}
                            className="w-16 h-7 text-xs"
                          />
                          <span className="text-xs text-gray-400">%</span>
                        </div>
                      ))}
                    </div>
                  </td>
                  <td className="py-3 px-3 text-xs text-gray-500">
                    {config.bestWindows.length > 0
                      ? config.bestWindows.map((w) => `${w.day} ${w.hour}:00`).join(", ")
                      : "None"}
                  </td>
                  <td className="py-3 px-3">
                    <Button
                      size="sm"
                      disabled={!hasChanges || saving === config.track}
                      onClick={() => handleSave(config.track)}
                      className="h-7 text-xs"
                    >
                      {saving === config.track ? "Saving..." : "Save"}
                    </Button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}