"use client";

import { useState, useEffect } from "react";

const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

const TIME_OPTIONS = (() => {
  const opts: string[] = [];
  for (let h = 0; h < 24; h++) {
    for (let m = 0; m < 60; m += 30) {
      opts.push(`${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`);
    }
  }
  return opts;
})();

interface ScheduleEntry {
  day_of_week: number;
  start_time: string;
  end_time: string;
  available: boolean;
}

export default function CamSchedulePage() {
  const [schedule, setSchedule] = useState<ScheduleEntry[]>(
    DAYS.map((_, i) => ({
      day_of_week: i,
      start_time: "20:00",
      end_time: "23:00",
      available: false,
    }))
  );
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function load() {
      try {
        const res = await fetch("/api/livecam/schedule");
        if (res.ok) {
          const json = await res.json();
          if (json.data?.length) {
            setSchedule((prev) =>
              prev.map((entry) => {
                const found = json.data.find(
                  (d: Record<string, unknown>) => Number(d.day_of_week) === entry.day_of_week
                );
                if (found) {
                  return {
                    ...entry,
                    start_time: String(found.start_time).slice(0, 5),
                    end_time: String(found.end_time).slice(0, 5),
                    available: true,
                  };
                }
                return entry;
              })
            );
          }
        }
      } catch {
        // Table may not exist yet
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  const updateDay = (index: number, field: keyof ScheduleEntry, value: string | boolean) => {
    setSchedule((prev) =>
      prev.map((entry, i) => (i === index ? { ...entry, [field]: value } : entry))
    );
    setSaved(false);
  };

  const handleSave = async () => {
    setSaving(true);
    setSaved(false);
    try {
      const payload = schedule
        .filter((e) => e.available)
        .map((e) => ({
          day_of_week: e.day_of_week,
          start_time: e.start_time,
          end_time: e.end_time,
        }));

      const res = await fetch("/api/livecam/schedule", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ schedule: payload }),
      });

      if (res.ok) {
        setSaved(true);
      } else {
        const json = await res.json();
        alert(json.error || "Failed to save schedule");
      }
    } catch {
      alert("Failed to save schedule");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[40vh]">
        <div className="w-8 h-8 border-2 border-gold border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Cam Schedule</h1>
        <p className="text-text-muted mt-1">
          Set your weekly live cam schedule so viewers know when you&apos;ll be online.
        </p>
      </div>

      <div className="bg-surface rounded-xl border border-surface-light overflow-hidden">
        <div className="grid grid-cols-[140px_1fr_1fr_60px] gap-4 p-4 border-b border-surface-light text-text-muted text-sm font-medium">
          <div>Day</div>
          <div>Start Time</div>
          <div>End Time</div>
          <div>Active</div>
        </div>

        {schedule.map((entry, i) => (
          <div
            key={entry.day_of_week}
            className={`grid grid-cols-[140px_1fr_1fr_60px] gap-4 p-4 items-center ${
              i < DAYS.length - 1 ? "border-b border-surface-light" : ""
            } ${entry.available ? "" : "opacity-50"}`}
          >
            <div className="text-white font-medium">{DAYS[entry.day_of_week]}</div>

            <select
              value={entry.start_time}
              onChange={(e) => updateDay(i, "start_time", e.target.value)}
              disabled={!entry.available}
              className="bg-surface-light border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-gold/50 disabled:cursor-not-allowed"
            >
              {TIME_OPTIONS.map((t) => (
                <option key={t} value={t}>
                  {t}
                </option>
              ))}
            </select>

            <select
              value={entry.end_time}
              onChange={(e) => updateDay(i, "end_time", e.target.value)}
              disabled={!entry.available}
              className="bg-surface-light border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-gold/50 disabled:cursor-not-allowed"
            >
              {TIME_OPTIONS.map((t) => (
                <option key={t} value={t}>
                  {t}
                </option>
              ))}
            </select>

            <div className="flex justify-center">
              <button
                onClick={() => updateDay(i, "available", !entry.available)}
                className={`w-10 h-6 rounded-full transition-colors relative ${
                  entry.available ? "bg-gold" : "bg-surface-light"
                }`}
              >
                <span
                  className={`absolute top-1 left-1 w-4 h-4 rounded-full bg-white transition-transform ${
                    entry.available ? "translate-x-4" : ""
                  }`}
                />
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="flex items-center gap-4">
        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-gold hover:bg-gold-light text-black font-semibold px-8 py-3 rounded-xl transition-all disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Schedule"}
        </button>
        {saved && (
          <span className="text-green-400 text-sm flex items-center gap-1">
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fillRule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clipRule="evenodd"
              />
            </svg>
            Schedule saved!
          </span>
        )}
      </div>
    </div>
  );
}