import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { SubPageLayout } from "@/components/sub-page-layout";

export const Route = createFileRoute("/air-cooler")({
  head: () => ({
    meta: [
      { title: "Air Cooler — Promist" },
      {
        name: "description",
        content:
          "High-performance evaporative air coolers for industrial, commercial, and residential applications.",
      },
    ],
  }),
  component: ApplicationsAirCooler,
});

interface SpecRow {
  label: string;
  value: string;
}

interface ProductVariant {
  title: string;
  image: string;
  specs: SpecRow[];
}

const products: ProductVariant[] = [
  {
    title: "New Ducted Window Air Coolers",
    image: "/wp-uploads/2017/05/pm-a18s.jpg",
    specs: [
      { label: "Item No.", value: "PM-A18S" },
      { label: "Air flow rate", value: "18000m³/h" },
      { label: "Voltage", value: "220V / 380V" },
      { label: "Frequency", value: "50-60Hz" },
      { label: "Power", value: "1100W" },
      { label: "Wind pressure", value: "180Pa" },
      { label: "Water consumption", value: "5-10L/H" },
      { label: "Water tank capacity", value: "25L" },
      { label: "External air opening size", value: "670mm × 670mm" },
      { label: "Overall size", value: "1100 × 1100 × 950mm" },
      { label: "Package size", value: "1150 × 1150 × 1000mm" },
      { label: "Blower type", value: "Axial-flow type" },
      { label: "Casing material", value: "Plastic" },
      { label: "Application area", value: "100-120 sq.m" },
      { label: "Motor", value: "One speed, Three speed" },
      { label: "Noise", value: "≤75dB" },
      { label: "Air-out-way", value: "Blow-Down / Blow-Up / Blow-Side" },
    ],
  },
  {
    title: "Mobile Air Cooler",
    image: "/wp-uploads/2017/05/pm-12.jpg",
    specs: [
      { label: "Item No.", value: "PM-12" },
      { label: "Air flow rate", value: "12000m³/h" },
      { label: "Voltage", value: "120-127V / 220-240V" },
      { label: "Frequency", value: "50-60Hz" },
      { label: "Power", value: "450W" },
      { label: "Wind pressure", value: "120Pa" },
      { label: "Water consumption", value: "10-12L/H" },
      { label: "Water tank capacity", value: "50L" },
      { label: "External air opening size", value: "630mm × 650mm" },
      { label: "Package size", value: "940 × 600 × 1320mm" },
      { label: "Blower type", value: "Axial-flow type" },
      { label: "Casing material", value: "Plastic" },
      { label: "Application area", value: "100-150 sq.m" },
      { label: "Motor", value: "One speed, 3-phase" },
      { label: "Noise", value: "≤68dB" },
      { label: "Air-out-way", value: "Blow-side" },
    ],
  },
  {
    title: "Evaporative Air Coolers",
    image: "/wp-uploads/2017/05/pm-70.jpg",
    specs: [
      { label: "Item No.", value: "PM-70" },
      { label: "Air flow rate", value: "7000m³/h" },
      { label: "Voltage", value: "120-127V / 220-240V" },
      { label: "Frequency", value: "50-60Hz" },
      { label: "Power", value: "290W" },
      { label: "Wind pressure", value: "60Pa" },
      { label: "Water consumption", value: "4-6L/H" },
      { label: "Water tank capacity", value: "70L" },
      { label: "External air opening size", value: "670mm × 670mm" },
      { label: "Overall size", value: "860 × 530 × 1400mm" },
      { label: "Package size", value: "860 × 530 × 1230mm" },
      { label: "Blower type", value: "Axial-flow type" },
      { label: "Casing material", value: "Plastic" },
      { label: "Application area", value: "30-50 sq.m" },
      { label: "Motor", value: "Three speed, 1-phase" },
      { label: "Noise", value: "≤65dB" },
      { label: "Air-out-way", value: "Blow-side" },
    ],
  },
  {
    title: "Air Cooler",
    image: "/wp-uploads/2017/05/pm-18.jpg",
    specs: [
      { label: "Item No.", value: "PM-18" },
      { label: "Air flow rate", value: "18000m³/h" },
      { label: "Voltage", value: "120-127V / 220-240V" },
      { label: "Frequency", value: "50-60Hz" },
      { label: "Power", value: "550W" },
      { label: "Wind pressure", value: "120Pa" },
      { label: "Water consumption", value: "10-15L/H" },
      { label: "Water tank capacity", value: "50L" },
      { label: "External air opening size", value: "—" },
    ],
  },
  {
    title: "X Series Duct Air Cooler",
    image: "/wp-uploads/2017/05/pm-x18s.jpg",
    specs: [
      { label: "Item No.", value: "PM-X18S" },
      { label: "Air flow rate", value: "18000m³/h" },
      { label: "Voltage", value: "220V / 380V" },
      { label: "Frequency", value: "50-60Hz" },
      { label: "Power", value: "1100W" },
      { label: "Wind pressure", value: "180Pa" },
      { label: "Water consumption", value: "5-10L/H" },
      { label: "Water tank capacity", value: "2L" },
    ],
  },
];

function SpecTable({ specs }: { specs: SpecRow[] }) {
  return (
    <table className="w-full border-collapse">
      <tbody>
        {specs.map((row, i) => (
          <tr key={i} className="border-b">
            <td className="py-2 font-semibold w-1/2">{row.label}</td>
            <td className="py-2">{row.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function AccordionSection({ product, defaultOpen = false }: { product: ProductVariant; defaultOpen?: boolean }) {
  const [open, setOpen] = useState(defaultOpen);

  return (
    <div className="border rounded-lg overflow-hidden">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full px-6 py-4 text-left font-bold text-lg bg-white hover:bg-gray-50 transition-colors"
      >
        <span>{product.title}</span>
        <svg
          className={`w-4 h-4 transition-transform ${open ? "rotate-90" : ""}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>
      {open && (
        <div className="px-6 py-4 border-t">
          <div className="grid md:grid-cols-[300px_1fr] gap-6 items-start">
            <img
              src={product.image}
              alt={product.title}
              className="w-full max-w-[300px] h-auto rounded-lg"
            />
            <SpecTable specs={product.specs} />
          </div>
        </div>
      )}
    </div>
  );
}

function ApplicationsAirCooler() {
  return (
    <SubPageLayout
      eyebrow="Applications"
      title="Air Cooler"
      lede="Our evaporative air coolers combine the power of high-pressure misting with fan-forced airflow for maximum cooling efficiency."
    >
      <div className="py-10 px-6 lg:px-10">
        <div className="prose max-w-none text-muted-foreground space-y-4 mb-8">
          <p>
            Promist offers a range of evaporative air coolers designed for various
            applications. Our ducted window air coolers and portable units provide
            effective, energy-efficient cooling for industrial, commercial, and
            residential spaces.
          </p>
        </div>
        <div className="space-y-4">
          {products.map((product, i) => (
            <AccordionSection key={product.title} product={product} defaultOpen={i === 0} />
          ))}
        </div>
      </div>
    </SubPageLayout>
  );
}
