"use client";

import { useMemo, useState } from "react";

import { Button, Card, TabBar, Typography } from "@/components/ui";
import { Tab } from "@/components/ui/TabBar/TabBar";

import styles from "./Horoscope.module.scss";

type Period = "today" | "week" | "month" | "year";

const TABS: Tab<Period>[] = [
  { label: "Today", value: "today" },
  { label: "Week", value: "week" },
  { label: "Month", value: "month" },
  { label: "Year", value: "year" },
];

const HOROSCOPE_TEXT = {
  today:
    "Trust your instincts — they’ll help you navigate a small but unexpected challenge. A kind gesture or uplifting message may come your way, reminding you of your deeper connections. Make time this evening to unwind and recharge, even if just for a little while.",
  week: "This week brings subtle shifts. Something you’ve been waiting for might finally begin to move — slowly, but in the right direction. Stay grounded when things feel uncertain, and don’t ignore the small signs around you. They’re pointing you where you need to go. By the weekend, clarity begins to settle in..",
  month:
    "A period of quiet transformation is unfolding. You may find yourself rethinking certain priorities or discovering a new sense of purpose in familiar routines. There’s no rush — let things evolve naturally. Conversations that happen mid-month could carry more meaning than they seem at first. Listen closely.",
  year: "The year ahead holds both growth and gentle reminders of what truly matters. There may be moments when you’re pulled in many directions, but your inner compass will remain strong — trust it. You’ll build something meaningful this year, even if it takes time. Stay open, stay curious, and stay kind to yourself along the way.",
};

export default function Horoscope() {
  const [active, setActive] = useState<Period>("today");
  const [isCollapsed, setIscollapsed] = useState(true);

  const enableCollapse = useMemo(() => {
    return HOROSCOPE_TEXT[active]?.split(" ")?.length > 30;
  }, [active]);

  const text = useMemo(() => {
    if (!isCollapsed || !enableCollapse) return HOROSCOPE_TEXT[active];
    return HOROSCOPE_TEXT[active]?.split(" ").slice(0, 31).join(" ") + " ...";
  }, [isCollapsed, active, enableCollapse]);

  return (
    <Card className={styles.card}>
      <TabBar<Period> tabs={TABS} active={active} onChange={setActive} />
      <div className={styles.content}>
        <Typography as="h3" weight="regular" className={styles.title}>
          — Your Horoscope today —
        </Typography>
        <Typography as="p" weight="medium" className={styles.text}>
          {text}
        </Typography>
        {enableCollapse && (
          <Button
            className={styles.seeAllButton}
            onClick={() => setIscollapsed(prev => !prev)}
          >
            <Typography
              as="span"
              size="sm"
              weight="medium"
              color="secondary"
              align="right"
            >
              {isCollapsed ? "See All" : "Hide"}
            </Typography>
          </Button>
        )}
      </div>
    </Card>
  );
}
