"use client";

import { useState, useEffect } from "react";
import ManagePageSkeleton from "@/components/shared/manage-page-skeleton";

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

interface DaySchedule {
  enabled: boolean;
  start: string;
  end: string;
  is_all_day: boolean;
}

export default function ManageAvailabilitiesPage() {
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [schedule, setSchedule] = useState<Record<string, DaySchedule>>(
    Object.fromEntries(days.map((d) => [d, { enabled: false, start: "09:00", end: "22:00", is_all_day: false }]))
  );

  useEffect(() => {
    fetch("/api/profile/availabilities")
      .then((r) => r.json())
      .then((data) => {
        if (data.availabilities?.length) {
          const newSchedule: Record<string, DaySchedule> = {};
          for (const day of days) {
            const entry = data.availabilities.find(
              (a: { day: string }) => a.day === day
            );
            if (entry) {
              newSchedule[day] = {
                enabled: true,
                start: entry.start_at || "09:00",
                end: entry.end_at || "22:00",
                is_all_day: entry.is_all_day || false,
              };
            } else {
              newSchedule[day] = { enabled: false, start: "09:00", end: "22:00", is_all_day: false };
            }
          }
          setSchedule(newSchedule);
        }
      })
      .finally(() => setLoading(false));
  }, []);

  function toggleDay(day: string) {
    setSchedule((prev) => ({
      ...prev,
      [day]: { ...prev[day], enabled: !prev[day].enabled },
    }));
  }

  function updateTime(day: string, field: "start" | "end", value: string) {
    setSchedule((prev) => ({
      ...prev,
      [day]: { ...prev[day], [field]: value },
    }));
  }

  async function handleSave() {
    setSaving(true);
    setMessage(null);

    // Reject any enabled day whose end time is not after start. HH:MM
    // strings sort lexically the same way they sort numerically.
    const invalidDay = days.find(
      (d) => schedule[d].enabled && !schedule[d].is_all_day && schedule[d].end <= schedule[d].start,
    );
    if (invalidDay) {
      setMessage({ type: "error", text: `${invalidDay}: end time must be after start time.` });
      setSaving(false);
      return;
    }

    try {
      const availabilities = days
        .filter((d) => schedule[d].enabled)
        .map((d) => ({
          day: d,
          start_at: schedule[d].is_all_day ? null : schedule[d].start,
          end_at: schedule[d].is_all_day ? null : schedule[d].end,
          is_all_day: schedule[d].is_all_day,
        }));

      const res = await fetch("/api/profile/availabilities", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ availabilities }),
      });
      if (!res.ok) throw new Error("Failed");
      setMessage({ type: "success", text: "Availability updated successfully." });
    } catch {
      setMessage({ type: "error", text: "Failed to update availability." });
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <ManagePageSkeleton />;

  return (
    <div className="max-w-2xl mx-auto">
      <h1 className="text-3xl font-bold text-text mb-6">Availability Schedule</h1>

      <div className="bg-surface rounded-lg p-6 space-y-4">
        {message && (
          <div className={`p-3 rounded-lg text-sm ${message.type === "success" ? "bg-green-900/30 text-green-400" : "bg-red-900/30 text-red-400"}`}>
            {message.text}
          </div>
        )}

        {days.map((day) => (
          <div key={day} className="flex items-center gap-4">
            <label className="flex items-center gap-2 w-32">
              <input
                type="checkbox"
                checked={schedule[day].enabled}
                onChange={() => toggleDay(day)}
                className="rounded border-surface-light text-primary focus:ring-primary"
              />
              <span className="text-text text-sm font-medium">{day}</span>
            </label>
            {schedule[day].enabled && (
              <div className="flex items-center gap-2">
                <input
                  type="time"
                  value={schedule[day].start}
                  onChange={(e) => updateTime(day, "start", e.target.value)}
                  className="bg-background border border-surface-light rounded-lg px-3 py-2 text-text text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                />
                <span className="text-text-muted">to</span>
                <input
                  type="time"
                  value={schedule[day].end}
                  onChange={(e) => updateTime(day, "end", e.target.value)}
                  className="bg-background border border-surface-light rounded-lg px-3 py-2 text-text text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                />
              </div>
            )}
          </div>
        ))}

        <div className="pt-4">
          <button
            onClick={handleSave}
            disabled={saving}
            className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg font-semibold transition-colors disabled:opacity-50"
          >
            {saving ? "Saving..." : "Save Schedule"}
          </button>
        </div>
      </div>
    </div>
  );
}