"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import StepShell from "@/app/components/astrologer/StepShell";
import {
  updateAvailability,
  getAstrologerProfile,
  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 EditAvailabilityPage() {
  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 [isWorkingOnPlatform, setIsWorkingOnPlatform] = useState(false);
  const [platformName, setPlatformName] = useState("");
  const [interviewFrom, setInterviewFrom] = useState("");
  const [interviewTo, setInterviewTo] = useState("");

  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: "",
    telegram: "",
    linkedin: "",
    website: "",
  });

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

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

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

    getAstrologerProfile(token)
      .then((response) => {
        const p = response.data ?? response;

        if (!p) return;

        setChatRate((p.ChatRate ?? p.chat_rate)?.toString() ?? chatRate);
        setCallRate(
          (p.AudioCallRate ?? p.call_rate)?.toString() ?? callRate
        );
        setFreeChat(!!(p.FreeChat ?? p.free_chat));
        setFreeCall(!!(p.FreeCall ?? p.free_call));
        setDailyHours(
          (p.dailyContribution ?? p.daily_working_hours)?.toString() ??
            dailyHours
        );

        setIsWorkingOnPlatform(!!p.isWorkingOnAnotherPlatform);
        setPlatformName(p.nameofplateform ?? "");

        // Confirmed live: GET /astrologer/profile only exposes a single
        // `Availability` record (one day), not the full week — apply
        // its from/to time and interview window to that one day and
        // leave the rest of the week as-entered defaults.
        const availability = p.Availability;

        if (availability?.Day) {
          setSchedule((prev) => ({
            ...prev,
            [availability.Day]: {
              enabled: true,
              from_time: availability.FromTime ?? prev[availability.Day]?.from_time ?? "10:00",
              to_time: availability.ToTime ?? prev[availability.Day]?.to_time ?? "18:00",
            },
          }));
        }

        if (availability?.InterviewFrom && availability.InterviewFrom !== "00:00:00") {
          setInterviewFrom(availability.InterviewFrom.slice(0, 5));
        }

        if (availability?.InterviewTo && availability.InterviewTo !== "00:00:00") {
          setInterviewTo(availability.InterviewTo.slice(0, 5));
        }

        setSocialLinks({
          facebook: p.FacebookProfileLink || p.facebook_link || "",
          instagram: p.InstaProfileLink || p.instagram_link || "",
          youtube: p.YoutubeProfileLink || p.youtube_link || "",
          telegram: p.TelegramProfileLink || p.telegram_link || "",
          linkedin: p.LinkedinProfileLink || p.linkedin_link || "",
          website: p.WebsiteProfileLink || p.website_link || "",
        });
      })
      .catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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: isWorkingOnPlatform,
        platform_name: isWorkingOnPlatform ? platformName : "",
        chat_rate: Number(chatRate) || 0,
        call_rate: Number(callRate) || 0,
        free_chat: freeChat,
        free_call: freeCall,
        timezone: "Asia/Kolkata",
        interview_from: interviewFrom || "00:00",
        interview_to: interviewTo || "00:00",
        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 updateAvailability(payload, token);

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

      toast.success("Saved");

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

  return (
    <StepShell step={10} title="Work Availability" mode="edit" 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">Working elsewhere?</h6>

      <div className="mb-4">
        <div className="form-check form-switch mb-2">
          <input
            className="form-check-input"
            type="checkbox"
            checked={isWorkingOnPlatform}
            onChange={(e) => setIsWorkingOnPlatform(e.target.checked)}
          />
          <label className="form-check-label small terms-text-color">
            I work on another astrology platform
          </label>
        </div>

        {isWorkingOnPlatform && (
          <input
            placeholder="Which platform?"
            className="form-control form-control-lg"
            value={platformName}
            onChange={(e) => setPlatformName(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">Interview window (optional)</h6>

      <div className="row g-3 mb-4">
        <div className="col-6">
          <label className="form-label fw-semibold">From</label>
          <input
            type="time"
            className="form-control form-control-lg"
            value={interviewFrom}
            onChange={(e) => setInterviewFrom(e.target.value)}
          />
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">To</label>
          <input
            type="time"
            className="form-control form-control-lg"
            value={interviewTo}
            onChange={(e) => setInterviewTo(e.target.value)}
          />
        </div>
      </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="Telegram URL"
            className="form-control form-control-lg"
            value={socialLinks.telegram}
            onChange={(e) =>
              setSocialLinks((prev) => ({ ...prev, telegram: e.target.value }))
            }
          />
        </div>

        <div className="col-6">
          <input
            placeholder="LinkedIn URL"
            className="form-control form-control-lg"
            value={socialLinks.linkedin}
            onChange={(e) =>
              setSocialLinks((prev) => ({ ...prev, linkedin: 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>
  );
}