import { createSignal, onMount, onCleanup, Show, type JSX } from "solid-js";
import type { WidgetSettings, WidgetSchema } from "../types/widget";

interface ClockProps {
  settings: WidgetSettings;
}

export function Clock(props: ClockProps): JSX.Element {
  const [time, setTime] = createSignal<string>("");

  const updateTime = () => {
    const now = new Date();
    const format = (props.settings.format as string) || "24h";
    const timeFormat = (props.settings.timeFormat as string) || "HH:MM:SS";

    let hours = now.getHours();
    const minutes = now.getMinutes().toString().padStart(2, "0");
    const seconds = now.getSeconds().toString().padStart(2, "0");

    let timeString = "";
    let ampm = "";

    if (format === "12h") {
      ampm = hours >= 12 ? " PM" : " AM";
      hours = hours % 12 || 12;
    }

    const hoursStr =
      format === "24h" ? hours.toString().padStart(2, "0") : hours.toString();

    // Build time string based on selected format
    switch (timeFormat) {
      case "HH:MM:SS":
        timeString = `${hoursStr}:${minutes}:${seconds}${ampm}`;
        break;
      case "HH:MM":
        timeString = `${hoursStr}:${minutes}${ampm}`;
        break;
      case "HH only":
        timeString = `${hoursStr}${ampm}`;
        break;
      default:
        timeString = `${hoursStr}:${minutes}:${seconds}${ampm}`;
    }

    if (props.settings.showDate) {
      const date = now.toLocaleDateString();
      timeString = `${date} ${timeString}`;
    }

    setTime(timeString);
  };

  onMount(() => {
    updateTime();
    const refreshRate = (props.settings.refreshRate as number) || 1;
    const interval = setInterval(updateTime, refreshRate * 1000);

    onCleanup(() => clearInterval(interval));
  });

  return (
    <div
      style={{
        border: "1px solid var(--border)",
        padding: "1rem",
        width: "100%",
        height: "100%",
        "box-sizing": "border-box",
        display: "flex",
        "flex-direction": "column",
        "justify-content": "center",
        "align-items": "center",
        background: "var(--bg, #fff)",
      }}
    >
      <div
        style={{
          "font-size": "clamp(0.8rem, 3.5vw + 0.5vh, 2.5rem)",
          "font-weight": "bold",
          "text-align": "center",
          "word-break": "break-word",
          "line-height": "1.2",
        }}
      >
        {time()}
      </div>
      <Show when={props.settings.showLabel}>
        <div
          style={{
            "margin-top": "0.5rem",
            color: "var(--gray)",
            "font-size": "clamp(0.6rem, 1.5vw + 0.5vh, 1rem)",
            "text-align": "center",
            "line-height": "1.4",
          }}
        >
          {props.settings.label || "Current Time"}
        </div>
      </Show>
    </div>
  );
}

export const clockSchema: WidgetSchema = {
  name: "Clock",
  description: "Display current time and date",
  settingsSchema: {
    format: {
      type: "select",
      label: "Time Format",
      default: "24h",
      options: ["12h", "24h"],
      required: true,
    },
    timeFormat: {
      type: "select",
      label: "Display Format",
      default: "HH:MM:SS",
      options: ["HH:MM:SS", "HH:MM", "HH only"],
    },
    showDate: {
      type: "boolean",
      label: "Show Date",
      default: true,
    },
    showLabel: {
      type: "boolean",
      label: "Show Label",
      default: true,
    },
    label: {
      type: "string",
      label: "Custom Label",
      default: "Current Time",
    },
    refreshRate: {
      type: "number",
      label: "Refresh Rate (seconds)",
      default: 1,
    },
  },
};
