"use client";

import { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";

type ScheduleDayTime = {
  day: string;
  startTime: string;
  endTime: string;
  type?: "time" | "whole_day" | "not_this_day";
};
type ScheduleNode = {
  mode:
    | "all_time"
    | "same_time_each_day"
    | "different_times_per_day"
    | "some_days";
  sameTime?: {
    startTime: string;
    endTime: string;
  };
  differentTimes?: ScheduleDayTime[];
  days?: { day: string; selected: boolean }[];
};

type Props = {
  node: ScheduleNode;
  onChange: (node: ScheduleNode) => void;
};

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

export default function ScheduleNodeItem({ node, onChange }: Props) {
  const [mode, setMode] = useState(node.mode);
  const [sameTime, setSameTime] = useState(
    node.sameTime || { startTime: "08:00", endTime: "20:00" }
  );
  const [differentTimes, setDifferentTimes] = useState<ScheduleDayTime[]>(
    node.differentTimes ||
      weekdays.map((day) => ({
        day,
        startTime: "08:00",
        endTime: "20:00",
        type: "time",
      }))
  );
  const [days, setDays] = useState(
    node.days ??
      weekdays.map((day) => ({
        day,
        selected: true,
      }))
  );
  useEffect(() => {
    const updatedNode: ScheduleNode = {
      mode,
      ...(mode === "same_time_each_day" && { sameTime }),
      ...(mode === "different_times_per_day" && { differentTimes }),
      ...(mode === "some_days" && { days }),
    };

    onChange(updatedNode);
    // console.log("[ScheduleNodeItem] onChange sent:", updatedNode);
  }, [mode, sameTime, differentTimes, days, onChange]);

  return (
    <div className="rounded-lg border bg-background p-4 shadow-sm space-y-4 relative">
      <Label className="text-sm font-semibold">Block schedule:</Label>
      <div className="flex gap-4 md:gap-8 flex-wrap text-xs md:text-sm ">
        <label className="flex items-center gap-2">
          <input
            type="radio"
            value="all_time"
            checked={mode === "all_time"}
            onChange={() => setMode("all_time")}
          />
          All the time
        </label>
        <label className="flex items-center gap-2">
          <input
            type="radio"
            value="same_time_each_day"
            checked={mode === "same_time_each_day"}
            onChange={() => setMode("same_time_each_day")}
          />
          Same time each day
        </label>
        <label className="flex items-center gap-2">
          <input
            type="radio"
            value="different_times_per_day"
            checked={mode === "different_times_per_day"}
            onChange={() => setMode("different_times_per_day")}
          />
          Different times per day
        </label>
        <label className="flex items-center gap-2">
          <input
            type="radio"
            value="some_days"
            checked={mode === "some_days"}
            onChange={() => setMode("some_days")}
          />
          Some days only
        </label>
      </div>

      {mode === "same_time_each_day" && (
        <div className="text-center space-x-3">
          <div className="inline-block">
            <Label>Start Time</Label>
            <Input
              type="time"
              value={sameTime.startTime}
              onChange={(e) =>
                setSameTime({ ...sameTime, startTime: e.target.value })
              }
            />
          </div>
          <div className="inline-block">
            <Label>End Time</Label>
            <Input
              type="time"
              value={sameTime.endTime}
              onChange={(e) =>
                setSameTime({ ...sameTime, endTime: e.target.value })
              }
            />
          </div>
        </div>
      )}

      {mode === "different_times_per_day" && (
        <div className="text-center">
          {differentTimes.map((item, index) => (
            <div
              key={item.day}
              className="inline-block text-center mt-6 mx-2 p-4 rounded-lg bg-muted-foreground/5"
            >
              <div>
                <Label>{item.day}</Label>
                <Select
                  value={item.type || "time"}
                  onValueChange={(v) => {
                    const updated = [...differentTimes];
                    const newType = v as "time" | "whole_day" | "not_this_day";
                    updated[index].type = newType;

                    if (newType === "time") {
                      updated[index].startTime = "08:00";
                      updated[index].endTime = "20:00";
                    }

                    setDifferentTimes(updated);
                  }}
                >
                  <SelectTrigger
                    className={
                      item.type === "not_this_day"
                        ? "w-fit px-4 m-auto my-2 text-red-400"
                        : item.type === "whole_day"
                        ? "w-fit px-4 m-auto my-2 text-green-400"
                        : "w-fit px-4 m-auto my-2"
                    }
                  >
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="time">Custom time</SelectItem>
                    <SelectItem value="whole_day" className="">
                      Whole day
                    </SelectItem>
                    <SelectItem value="not_this_day">Not this day</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <>
                <div className="inline-block">
                  <Label>Start</Label>
                  <Input
                    type="time"
                    value={
                      item.type === "not_this_day" || item.type === "whole_day"
                        ? "08:00"
                        : item.startTime
                    }
                    onChange={(e) => {
                      const updated = [...differentTimes];
                      updated[index].startTime = e.target.value;
                      setDifferentTimes(updated);
                    }}
                    disabled={item.type !== undefined && item.type !== "time"}
                  />
                </div>
                <div className="inline-block">
                  <Label>End</Label>
                  <Input
                    type="time"
                    value={
                      item.type === "not_this_day" || item.type === "whole_day"
                        ? "20:00"
                        : item.endTime
                    }
                    onChange={(e) => {
                      const updated = [...differentTimes];
                      updated[index].endTime = e.target.value;
                      setDifferentTimes(updated);
                    }}
                    disabled={item.type !== undefined && item.type !== "time"}
                  />
                </div>
              </>
            </div>
          ))}
        </div>
      )}

      {mode === "all_time" && (
        <p className="text-sm text-muted-foreground">
          This rule will always be active.
        </p>
      )}
      {mode === "some_days" && (
        <div className="text-center mt-4 space-y-2">
          <Label>Select active days:</Label>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
            {weekdays.map((day) => {
              const checked =
                days.find((d) => d.day === day)?.selected ?? false;
              return (
                <label key={day} className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={(e) => {
                      const updated = [...days];
                      const index = updated.findIndex((d) => d.day === day);
                      if (index !== -1) {
                        updated[index].selected = e.target.checked;
                      }
                      setDays(updated);
                    }}
                  />
                  <span>{day}</span>
                </label>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}