"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useToastStore } from "@/lib/stores/toast-store";

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

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

export default function OnboardingWorkingTimesPage() {
  const router = useRouter();
  const addToast = useToastStore((s) => s.addToast);
  const [saving, setSaving] = useState(false);
  const [schedule, setSchedule] = useState<Record<string, DaySchedule>>(
    Object.fromEntries(days.map((d) => [d, { enabled: false, start: "09:00", end: "22:00" }]))
  );

  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 handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    try {
      const availabilities = days
        .filter((day) => schedule[day].enabled)
        .map((day) => ({
          day,
          start_at: schedule[day].start,
          end_at: schedule[day].end,
          is_all_day: false,
        }));

      const res = await fetch("/api/onboarding/working-times", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ availabilities }),
      });
      if (!res.ok) throw new Error("Failed to save");
      router.push("/dashboard");
    } catch {
      addToast("error", "Failed to save working times.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-8">
        <div className="flex items-center gap-2 text-sm text-text-muted mb-2">
          <span className="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">6</span>
          <span>Step 6 of 6</span>
        </div>
        <h1 className="text-3xl font-bold text-text">Working Times</h1>
        <p className="text-text-muted mt-1">Set your availability for each day of the week.</p>
      </div>

      <form onSubmit={handleSubmit} className="bg-surface rounded-lg p-6 space-y-4">
        {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="flex justify-between pt-4">
          <button
            type="button"
            onClick={() => router.push("/onboarding/services")}
            className="text-text-muted hover:text-text transition-colors"
          >
            Back
          </button>
          <button
            type="submit"
            disabled={saving}
            className="bg-primary hover:bg-primary-dark text-white px-8 py-3 rounded-lg font-semibold transition-colors disabled:opacity-50"
          >
            {saving ? "Saving..." : "Complete Setup"}
          </button>
        </div>
      </form>
    </div>
  );
}