"use client";

import { useState } from "react";
import { ChevronDown, Building2, Maximize2 } from "lucide-react";
import { Reveal } from "@/components/shared/Reveal";
import type { VenueCapacityTableSection } from "@/constants/pages";

type Props = {
  section: VenueCapacityTableSection;
};

export default function VenueCapacityTable({ section }: Props) {
  const [expandedRow, setExpandedRow] = useState<number | null>(null);

  return (
    <section className="bg-sand px-6 py-12 md:px-12 md:py-16">
      <Reveal>
        <div className="mx-auto max-w-7xl">

          <div className="mx-auto mb-14 max-w-3xl text-center md:mb-16">
            <h2
              className="font-serif italic text-3xl font-light leading-tight text-espresso md:text-5xl">
              {section.title}
            </h2>

              <div className="mt-6 flex items-center justify-center gap-4">
                <div className="h-0.5 w-20 bg-gradient-to-r from-transparent to-gold" />
                <div className="relative flex items-center justify-center">
                  <div className="h-4 w-4 rotate-45 border border-gold bg-gold/20" />
                  <div className="absolute h-2 w-2 rotate-45 bg-gold" />
                </div>
                <div className="h-0.5 w-20 bg-gradient-to-l from-transparent to-gold" />
              </div>

            {section.description && (
              <p
                className="mx-auto mt-7 max-w-3xl font-sans text-sm font-light leading-7 text-mahogany md:text-base">
                {section.description}
              </p>
            )}
          </div>

          <div
            className="hidden overflow-hidden rounded-[28px] border border-gold/20 bg-ivory shadow-[0_25px_70px_rgba(67,45,29,0.08)] md:block">
            <div className="overflow-x-auto">

              <table className="w-full min-w-[1050px] border-collapse">
                <thead>
                  <tr className="bg-mahogany text-ivory">
                    <th className="border-r border-ivory/10 px-6 py-6 text-left font-sans text-[9px] font-medium uppercase tracking-[0.25em]">
                      Event Space
                    </th>

                    <th className="border-r border-ivory/10 px-5 py-6 text-left font-sans text-[9px] font-medium uppercase tracking-[0.25em]">
                      Type
                    </th>

                    <th className="border-r border-ivory/10 px-5 py-6 text-left font-sans text-[9px] font-medium uppercase tracking-[0.25em]">
                      Area
                    </th>

                    <th className="border-r border-ivory/10 px-5 py-6 text-center font-sans text-[9px] font-medium uppercase tracking-[0.2em]">
                      Theatre
                    </th>

                    <th
                      className="
                        border-r
                        border-ivory/10
                        px-5
                        py-6
                        text-center
                        font-sans
                        text-[9px]
                        font-medium
                        uppercase
                        tracking-[0.25em]
                      "
                    >
                      Classroom
                    </th>

                    <th
                      className="
                        border-r
                        border-ivory/10
                        px-5
                        py-6
                        text-center
                        font-sans
                        text-[9px]
                        font-medium
                        uppercase
                        tracking-[0.25em]
                      "
                    >
                      Cluster
                    </th>

                    <th
                      className="
                        border-r
                        border-ivory/10
                        px-5
                        py-6
                        text-center
                        font-sans
                        text-[9px]
                        font-medium
                        uppercase
                        tracking-[0.25em]
                      "
                    >
                      U-Shape
                    </th>

                    <th
                      className="
                        px-5
                        py-6
                        text-center
                        font-sans
                        text-[9px]
                        font-medium
                        uppercase
                        tracking-[0.25em]
                      "
                    >
                      Boardroom
                    </th>

                  </tr>
                </thead>

                {/* =================================================== */}
                {/* TABLE BODY                                          */}
                {/* =================================================== */}

                <tbody>
                  {section.rows.map((row, index) => (
                    <tr
                      key={row.venue}
                      className="
                        group
                        border-b
                        border-espresso/10
                        transition-colors
                        duration-300
                        last:border-b-0
                        hover:bg-[#fff8ed]
                      "
                    >

                      {/* Venue */}

                      <td className="px-6 py-6 align-middle">
                        <div className="flex items-center gap-4">

                          <div>
                            <p
                              className="
                                font-serif
                                text-lg
                                italic
                                text-espresso
                                transition-colors
                                duration-300
                                group-hover:text-gold-deep
                              "
                            >
                              {row.venue}
                            </p>
                          </div>

                        </div>
                      </td>

                      {/* Type */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          align-middle
                          font-sans
                          text-xs
                          leading-5
                          text-mahogany
                        "
                      >
                        {row.type}
                      </td>

                      {/* Area */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          align-middle
                          font-sans
                          text-xs
                          leading-5
                          text-mahogany
                        "
                      >
                        <div className="flex items-start gap-2">
                          <span>{row.area}</span>
                        </div>
                      </td>

                      {/* Theatre */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          text-center
                          align-middle
                        "
                      >
                        <span
                          className="
                            font-serif
                            text-xl
                            italic
                            text-gold-deep
                          "
                        >
                          {row.theatre}
                        </span>
                      </td>

                      {/* Classroom */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          text-center
                          align-middle
                          font-serif
                          text-lg
                          italic
                          text-espresso
                        "
                      >
                        {row.classroom}
                      </td>

                      {/* Cluster */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          text-center
                          align-middle
                          font-serif
                          text-lg
                          italic
                          text-espresso
                        "
                      >
                        {row.cluster}
                      </td>

                      {/* U Shape */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          text-center
                          align-middle
                          font-serif
                          text-lg
                          italic
                          text-espresso
                        "
                      >
                        {row.uShape}
                      </td>

                      {/* Boardroom */}

                      <td
                        className="
                          border-l
                          border-espresso/5
                          px-5
                          py-6
                          text-center
                          align-middle
                          font-serif
                          text-lg
                          italic
                          text-espresso
                        "
                      >
                        {row.boardroom}
                      </td>

                    </tr>
                  ))}
                </tbody>

              </table>
            </div>
          </div>

          {/* ========================================================= */}
          {/* MOBILE CARDS                                              */}
          {/* ========================================================= */}

          <div className="space-y-4 md:hidden">

            {section.rows.map((row, index) => {
              const isExpanded = expandedRow === index;

              return (
                <div
                  key={row.venue}
                  className="
                    overflow-hidden
                    rounded-[22px]
                    border
                    border-gold/20
                    bg-ivory
                    shadow-[0_12px_35px_rgba(67,45,29,0.07)]
                  "
                >

                  {/* Main information */}

                  <div className="p-5">

                    <div className="flex items-start gap-4">

                      <div className="min-w-0 flex-1">

                        <h3
                          className="
                            font-serif
                            text-xl
                            italic
                            text-espresso
                          "
                        >
                          {row.venue}
                        </h3>

                        <p
                          className="
                            mt-1
                            font-sans
                            text-[9px]
                            uppercase
                            tracking-[0.18em]
                            text-gold-deep
                          "
                        >
                          {row.type}
                        </p>

                      </div>

                    </div>

                    {/* Venue | Area | Theatre */}

                    <div className="mt-6 grid grid-cols-3 divide-x divide-gold/20">

                      <div className="pr-3">

                        <span
                          className="
                            block
                            font-sans
                            text-[8px]
                            uppercase
                            tracking-[0.15em]
                            text-mahogany/70
                          "
                        >
                          Area
                        </span>

                        <p
                          className="
                            mt-1
                            font-serif
                            text-sm
                            italic
                            leading-5
                            text-espresso
                          "
                        >
                          {row.area}
                        </p>

                      </div>

                      <div className="px-3">

                        <span
                          className="
                            block
                            font-sans
                            text-[8px]
                            uppercase
                            tracking-[0.15em]
                            text-mahogany/70
                          "
                        >
                          Theatre
                        </span>

                        <p
                          className="
                            mt-1
                            font-serif
                            text-xl
                            italic
                            text-gold-deep
                          "
                        >
                          {row.theatre}
                        </p>

                      </div>

                      <div className="pl-3">

                        <span
                          className="
                            block
                            font-sans
                            text-[8px]
                            uppercase
                            tracking-[0.15em]
                            text-mahogany/70
                          "
                        >
                          Type
                        </span>

                        <p
                          className="
                            mt-1
                            line-clamp-2
                            font-sans
                            text-[10px]
                            leading-4
                            text-mahogany
                          "
                        >
                          {row.type}
                        </p>

                      </div>

                    </div>

                  </div>

                  {/* ================================================= */}
                  {/* EXPAND BUTTON                                      */}
                  {/* ================================================= */}

                  <button
                    type="button"
                    onClick={() =>
                      setExpandedRow(isExpanded ? null : index)
                    }
                    className="
                      flex
                      w-full
                      items-center
                      justify-between
                      border-t
                      border-gold/15
                      bg-cream
                      px-5
                      py-4
                      text-left
                      transition-colors
                      duration-300
                      hover:bg-[#fff6e8]
                    "
                    aria-expanded={isExpanded}
                  >
                    <span
                      className="
                        font-sans
                        text-[9px]
                        font-medium
                        uppercase
                        tracking-[0.2em]
                        text-gold-deep
                      "
                    >
                      {isExpanded
                        ? "Hide Seating Options"
                        : "View Seating Options"}
                    </span>

                    <ChevronDown
                      className={`
                        h-4
                        w-4
                        text-gold
                        transition-transform
                        duration-300
                        ${isExpanded ? "rotate-180" : ""}
                      `}
                    />
                  </button>

                  {/* ================================================= */}
                  {/* EXPANDED SEATING OPTIONS                           */}
                  {/* ================================================= */}

                  <div
                    className={`
                      grid
                      transition-all
                      duration-300
                      ease-out
                      ${
                        isExpanded
                          ? "grid-rows-[1fr] opacity-100"
                          : "grid-rows-[0fr] opacity-0"
                      }
                    `}
                  >
                    <div className="overflow-hidden">

                      <div className="grid grid-cols-2 gap-px border-t border-gold/10 bg-gold/10">

                        <MobileCapacity
                          label="Classroom"
                          value={row.classroom}
                        />

                        <MobileCapacity
                          label="Cluster"
                          value={row.cluster}
                        />

                        <MobileCapacity
                          label="U-Shape"
                          value={row.uShape}
                        />

                        <MobileCapacity
                          label="Boardroom"
                          value={row.boardroom}
                        />

                      </div>

                    </div>
                  </div>

                </div>
              );
            })}

          </div>

        </div>
      </Reveal>
    </section>
  );
}


/* ================================================================ */
/* MOBILE CAPACITY                                                  */
/* ================================================================ */

function MobileCapacity({
  label,
  value,
}: {
  label: string;
  value: string;
}) {
  return (
    <div className="bg-ivory px-5 py-5">

      <span
        className="
          block
          font-sans
          text-[8px]
          uppercase
          tracking-[0.18em]
          text-mahogany/70
        "
      >
        {label}
      </span>

      <span
        className="
          mt-1
          block
          font-serif
          text-xl
          italic
          text-espresso
        "
      >
        {value}
      </span>

    </div>
  );
}