"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";
import StepShell from "@/app/components/astrologer/StepShell";
import { saveAvailability, friendlyErrorMessage } from "@/app/lib/astrologer";

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

interface DaySchedule {
  enabled: boolean;
  from_time: string;
  to_time: string;
}

export default function AvailabilityPage() {
  const router = useRouter();

  const [chatRate, setChatRate] = useState("25");
  const [callRate, setCallRate] = useState("35");
  const [freeChat, setFreeChat] = useState(false);
  const [freeCall, setFreeCall] = useState(false);
  const [dailyHours, setDailyHours] = useState("8");

  const [schedule, setSchedule] = useState<Record<string, DaySchedule>>(
    () =>
      Object.fromEntries(
        DAYS.map((day) => [
          day,
          {
            enabled: day !== "Sunday",
            from_time: "10:00",
            to_time: "18:00",
          },
        ])
      )
  );

  const [socialLinks, setSocialLinks] = useState({
    facebook: "",
    instagram: "",
    youtube: "",
    website: "",
  });

  const [loading, setLoading] = useState(false);

  const updateDay = (day: string, patch: Partial<DaySchedule>) =>
    setSchedule((prev) => ({ ...prev, [day]: { ...prev[day], ...patch } }));

  const handleSave = async () => {
    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    try {
      setLoading(true);

      const payload = {
        device_type: "WEB",
        daily_working_hours: Number(dailyHours) || 0,
        is_working_on_platform: false,
        chat_rate: Number(chatRate) || 0,
        call_rate: Number(callRate) || 0,
        free_chat: freeChat,
        free_call: freeCall,
        timezone: "Asia/Kolkata",
        schedule: DAYS.filter((day) => schedule[day].enabled).map(
          (day) => ({
            day,
            from_time: schedule[day].from_time,
            to_time: schedule[day].to_time,
            slot_duration: 15,
            is_break: false,
          })
        ),
        social_links: socialLinks,
      };

      const response = await saveAvailability(payload, token);

      if (!response.success) {
        toast.error(friendlyErrorMessage(response.message, "Unable to save. Please try again."));
        return;
      }

      toast.success("Saved");

      router.push("/astrologer/profile/progress");
    } catch (error: any) {
      toast.error(friendlyErrorMessage(error.response?.data?.message, "Something went wrong."));
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
    <Header />
    <StepShell step={10} title="Work Availability" loading={loading} onSave={handleSave}>
      <h6 className="mb-3">Rates</h6>

      <div className="row g-3 mb-4">
        <div className="col-6">
          <label className="form-label fw-semibold">Chat rate (₹/min)</label>
          <input
            type="number"
            className="form-control form-control-lg"
            value={chatRate}
            onChange={(e) => setChatRate(e.target.value)}
          />
          <div className="form-check form-switch mt-2">
            <input
              className="form-check-input"
              type="checkbox"
              checked={freeChat}
              onChange={(e) => setFreeChat(e.target.checked)}
            />
            <label className="form-check-label small terms-text-color">
              Offer free chat
            </label>
          </div>
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Call rate (₹/min)</label>
          <input
            type="number"
            className="form-control form-control-lg"
            value={callRate}
            onChange={(e) => setCallRate(e.target.value)}
          />
          <div className="form-check form-switch mt-2">
            <input
              className="form-check-input"
              type="checkbox"
              checked={freeCall}
              onChange={(e) => setFreeCall(e.target.checked)}
            />
            <label className="form-check-label small terms-text-color">
              Offer free call
            </label>
          </div>
        </div>
      </div>

      <div className="mb-4">
        <label className="form-label fw-semibold">
          Daily working hours
        </label>
        <input
          type="number"
          className="form-control form-control-lg"
          value={dailyHours}
          onChange={(e) => setDailyHours(e.target.value)}
        />
      </div>

      <h6 className="mb-3">Weekly schedule</h6>

      {DAYS.map((day) => (
        <div
          key={day}
          className="astrologer-repeat-card d-flex align-items-center gap-3 flex-wrap"
        >
          <div className="form-check form-switch mb-0" style={{ width: 130 }}>
            <input
              className="form-check-input"
              type="checkbox"
              checked={schedule[day].enabled}
              onChange={(e) => updateDay(day, { enabled: e.target.checked })}
            />
            <label className="form-check-label">{day}</label>
          </div>

          {schedule[day].enabled && (
            <>
              <input
                type="time"
                className="form-control form-control-lg"
                style={{ maxWidth: 140 }}
                value={schedule[day].from_time}
                onChange={(e) => updateDay(day, { from_time: e.target.value })}
              />

              <span className="terms-text-color">to</span>

              <input
                type="time"
                className="form-control form-control-lg"
                style={{ maxWidth: 140 }}
                value={schedule[day].to_time}
                onChange={(e) => updateDay(day, { to_time: e.target.value })}
              />
            </>
          )}
        </div>
      ))}

      <h6 className="mb-3 mt-4">Social links (optional)</h6>

      <div className="row g-3">
        <div className="col-6">
          <input
            placeholder="Facebook URL"
            className="form-control form-control-lg"
            value={socialLinks.facebook}
            onChange={(e) =>
              setSocialLinks((prev) => ({ ...prev, facebook: e.target.value }))
            }
          />
        </div>

        <div className="col-6">
          <input
            placeholder="Instagram URL"
            className="form-control form-control-lg"
            value={socialLinks.instagram}
            onChange={(e) =>
              setSocialLinks((prev) => ({
                ...prev,
                instagram: e.target.value,
              }))
            }
          />
        </div>

        <div className="col-6">
          <input
            placeholder="YouTube URL"
            className="form-control form-control-lg"
            value={socialLinks.youtube}
            onChange={(e) =>
              setSocialLinks((prev) => ({ ...prev, youtube: e.target.value }))
            }
          />
        </div>

        <div className="col-6">
          <input
            placeholder="Website URL"
            className="form-control form-control-lg"
            value={socialLinks.website}
            onChange={(e) =>
              setSocialLinks((prev) => ({ ...prev, website: e.target.value }))
            }
          />
        </div>
      </div>
    </StepShell>
    <Footer />
    </>
  );
}