"use client";
import Link from "next/link";

import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
  Button,
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Chip,
} from "@heroui/react";

type Horse = {
  lot: number;
  title: string;
  breed: string;
  owner: string;
  age: string;
  start: Date;
  end: Date;
  img: string;
};

export default function Schedule() {
  const locale = useLocale();
  const isRtl = (locale || "").toLowerCase().startsWith("ar");
  const t = useTranslations("ANNUAL_AUCTIONS_SHARING");
  const ALL_KEY = "all";

  const [day, setDay] = useState(1);
  const [horses, setHorses] = useState<Horse[]>([]);
  const [filterBreed, setFilterBreed] = useState<string>(ALL_KEY);
  const [filterOwner, setFilterOwner] = useState<string>(ALL_KEY);
  const [now, setNow] = useState<Date>(new Date());

  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    const start = new Date("2025-11-19T10:00:00");
    const duration = 15;
    const list: Horse[] = [];
    let lot = 101;
    const breeds = [
      "Egyptian",
      "Polish",
      "Straight Egyptian",
      "Desert Bred",
      "KSA Line",
    ];
    const owners = [
      "مربط الأصالة",
      "مربط النخبة",
      "مربط العرين",
      "مربط العز",
      "مربط الندى",
    ];
    const gallery = [
      "https://png.pngtree.com/thumb_back/fh260/background/20230612/pngtree-beautiful-black-horses-pictures-best-of-free-hd-wallpapers-horse-images-image_2951847.jpg",
      "https://blog.ajsrp.com/wp-content/uploads/2025/05/%D8%A7%D9%84%D8%AE%D9%8A%D9%84-%D8%A7%D9%84%D8%A3%D8%AF%D9%87%D9%85-696x398.jpg",
      "https://pbs.twimg.com/profile_images/1381035657611599877/pUb3dVAP_400x400.jpg",
      "https://artic.arabpage.net/wp-content/uploads/2020/02/765dbe37779ce1bca71be08d7c4f93b4.jpg",
    ];

    for (let i = 0; i < 33; i++) {
      const S = new Date(start.getTime() + i * duration * 60000);
      const E = new Date(S.getTime() + duration * 60000);
      list.push({
        lot,
        title: t("schedule.horse_title_fallback", { lot }),
        breed: breeds[i % breeds.length],
        owner: owners[i % owners.length],
        age: t("schedule.age_years", { years: 4 + (i % 5) }),
        start: S,
        end: E,
        img: gallery[i % gallery.length],
      });
      lot++;
    }
    setHorses(list);
  }, []);

  const formatTime = (d: Date) =>
    d.toLocaleTimeString("en-EN", { hour: "2-digit", minute: "2-digit" });

  const breeds = Array.from(new Set(horses.map((h) => h.breed)));
  const owners = Array.from(new Set(horses.map((h) => h.owner)));

  const filtered = horses.filter((h) => {
    const breedOk = filterBreed === ALL_KEY || h.breed === filterBreed;
    const ownerOk = filterOwner === ALL_KEY || h.owner === filterOwner;
    return breedOk && ownerOk;
  });

  const getStatus = (h: Horse) => {
    if (now >= h.start && now < h.end) return "live";
    if (now < h.start) return "upcoming";
    return "ended";
  };

  const renderStatus = (h: Horse) => {
    const s = getStatus(h);
    if (s === "live")
      return (
        <Chip color="danger" variant="flat" className="font-bold">
          {t("schedule.status_live")}
        </Chip>
      );
    if (s === "upcoming")
      return (
        <Chip color="success" variant="flat" className="font-bold">
          {t("schedule.status_upcoming")}
        </Chip>
      );
    return (
      <Chip color="default" variant="bordered" className="font-bold">
        {t("schedule.status_ended")}
      </Chip>
    );
  };

  const summary =
    filtered.length > 0
      ? t("schedule.summary", {
          from: formatTime(filtered[0].start),
          to: formatTime(filtered[filtered.length - 1].end),
          total: filtered.length,
        })
      : t("schedule.no_data");

  return (
    <section id="schedule" className="py-10">
      <div className="max-w-7xl mx-auto px-6 space-y-6">
        {/* Tabs */}
        <div className="flex items-center justify-between flex-wrap gap-3">
          <h2 className="text-2xl font-extrabold">{t("schedule.title")}</h2>
          <div className="flex gap-2">
            {[1, 2, 3].map((d) => (
              <Button
                key={d}
                size="sm"
                variant={day === d ? "solid" : "bordered"}
                color={day === d ? "success" : "default"}
                onPress={() => setDay(d)}
              >
                {t("schedule.day", { day: d })}
              </Button>
            ))}
          </div>
        </div>

        <div className="text-sm text-gray-600 bg-gray-50 p-3 rounded-lg border">
          {summary}
        </div>

        <div className="flex flex-wrap gap-3">
          <Dropdown>
            <DropdownTrigger>
              <Button variant="bordered" size="sm">
                {filterBreed === ALL_KEY
                  ? t("schedule.filters.all")
                  : filterBreed}
              </Button>
            </DropdownTrigger>
            <DropdownMenu
              aria-label={t("schedule.filters.breed_aria")}
              onAction={(key) => setFilterBreed(String(key))}
            >
              <>
                <DropdownItem key={ALL_KEY}>
                  {t("schedule.filters.all_breeds")}
                </DropdownItem>
                {breeds.map((b) => (
                  <DropdownItem key={b}>{b}</DropdownItem>
                ))}
              </>
            </DropdownMenu>
          </Dropdown>

          <Dropdown>
            <DropdownTrigger>
              <Button variant="bordered" size="sm">
                {filterOwner === ALL_KEY
                  ? t("schedule.filters.all")
                  : filterOwner}
              </Button>
            </DropdownTrigger>
            <DropdownMenu
              aria-label={t("schedule.filters.owner_aria")}
              onAction={(key) => setFilterOwner(String(key))}
            >
              <>
                <DropdownItem key={ALL_KEY}>
                  {t("schedule.filters.all_owners")}
                </DropdownItem>
                {owners.map((o) => (
                  <DropdownItem key={o}>{o}</DropdownItem>
                ))}
              </>
            </DropdownMenu>
          </Dropdown>
        </div>

        <Table
          aria-label={t("schedule.table_aria")}
          dir={isRtl ? "rtl" : "ltr"}
        >
          <TableHeader>
            <TableColumn>{t("schedule.th_time")}</TableColumn>
            <TableColumn>{t("schedule.th_image")}</TableColumn>
            <TableColumn>{t("schedule.th_horse")}</TableColumn>
            <TableColumn>{t("schedule.th_breed")}</TableColumn>
            <TableColumn>{t("schedule.th_owner")}</TableColumn>
            <TableColumn>{t("schedule.th_status")}</TableColumn>
            <TableColumn>{t("schedule.th_action")}</TableColumn>
          </TableHeader>
          <TableBody emptyContent={t("schedule.empty")}>
            {filtered.map((h) => {
              const status = getStatus(h);
              const disabled = status === "ended";
              return (
                <TableRow key={h.lot}>
                  <TableCell>
                    {formatTime(h.start)} - {formatTime(h.end)}
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <img
                        src={h.img}
                        alt={h.title}
                        className="w-20 h-14 object-cover rounded-md border shadow-sm"
                      />
                      <div className="text-xs text-slate-600">
                        <span className="block font-bold text-slate-800">
                          {t("schedule.age_label")}:{" "}
                          <span className="text-primary">{h.age}</span>
                        </span>
                      </div>
                    </div>
                  </TableCell>

                  <TableCell className="font-bold">{h.title}</TableCell>
                  <TableCell>{h.breed}</TableCell>
                  <TableCell>{h.owner}</TableCell>
                  <TableCell>{renderStatus(h)}</TableCell>
                  <TableCell>
                    <Button
                      as={Link}
                      href={`/horses/${h.lot}`}
                      size="sm"
                      variant="flat"
                      color="success"
                      isDisabled={disabled}
                      prefetch={true}
                    >
                      {t("schedule.details_button")}
                    </Button>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    </section>
  );
}