'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { treatments, treatmentCategories } from '@/data/treatments';

export default function TreatmentsPage() {
  const [selectedCategory, setSelectedCategory] = useState('');
  const [searchQuery, setSearchQuery] = useState('');

  const filteredTreatments = treatments.filter((treatment) => {
    const matchCategory = !selectedCategory || treatment.category === selectedCategory;
    const matchSearch =
      treatment.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      treatment.description.toLowerCase().includes(searchQuery.toLowerCase());
    return matchCategory && matchSearch;
  });

  return (
    <main className="min-h-screen bg-soft-white">
      <Navbar />

      {/* Page Hero */}
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase text-white">
            Perawatan Kami
          </h1>
          <p className="text-ivory/80 max-w-2xl mx-auto text-lg">
            Solusi kecantikan terlengkap untuk kulit sehat & bercahaya
          </p>
          <nav className="mt-4 text-xs tracking-widest uppercase text-white">
            <Link href="/" className="hover:text-gold transition text-white">
              Home
            </Link>
            <span className="mx-2 text-white">/</span>
            <span className="text-white/60">Treatments</span>
          </nav>
        </div>
      </section>

      {/* Filter Bar */}
      <section className="sticky top-16 z-40 bg-white border-b border-blush-pink py-4">
        <div className="container-custom">
          <div className="mb-4">
            <input
              type="text"
              placeholder="🔍 Cari treatment..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="input-field w-full"
            />
          </div>
          <div className="flex flex-wrap gap-2">
            <button
              onClick={() => setSelectedCategory('')}
              className={`px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 ${
                !selectedCategory
                  ? 'bg-gold text-white shadow-md shadow-gold/30'
                  : 'border-2 border-gold/40 text-gold bg-white hover:bg-gold hover:text-white hover:shadow-md hover:shadow-gold/30 hover:-translate-y-0.5 active:scale-95'
              }`}
            >
              Semua
            </button>
            {treatmentCategories.map((category) => (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 ${
                  selectedCategory === category.id
                    ? 'bg-gold text-white shadow-md shadow-gold/30'
                    : 'border-2 border-gold/40 text-gold bg-white hover:bg-gold hover:text-white hover:shadow-md hover:shadow-gold/30 hover:-translate-y-0.5 active:scale-95'
                }`}
              >
                {category.name}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Category Description */}
      {selectedCategory && (() => {
        const cat = treatmentCategories.find((c) => c.id === selectedCategory);
        if (!cat) return null;
        return (
          <section className="pt-4 pb-2">
            <div className="container-custom">
              <div className="bg-gradient-to-r from-gold/10 via-ivory to-gold/10 border border-gold/20 rounded-xl p-5 md:p-6 text-center shadow-sm">
                <h3 className="font-cormorant text-lg font-bold text-espresso mb-2 uppercase">{cat.name}</h3>
                <div className="w-8 h-0.5 bg-gold mx-auto mb-2"></div>
                <p className="text-grey-dark text-sm max-w-2xl mx-auto leading-relaxed">
                  {cat.description}
                </p>
              </div>
              <div className="border-b border-blush mt-3"></div>
            </div>
          </section>
        );
      })()}

      {/* Treatments Grid */}
      <section className="pt-4 pb-12">
        <div className="container-custom">
          {filteredTreatments.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredTreatments.map((treatment) => (
                <Link
                  key={treatment.id}
                  href={`/treatments/${treatment.id}`}
                  className="card bg-white p-6 hover:shadow-card-hover transition-all duration-300 block"
                >
                  {/* Logo */}
                  <div className="mb-4 flex justify-center">
                    <Image src="/images/Logo-Carla.png" alt="Carla Skin Clinic" width={100} height={35} className="h-10 w-auto object-contain" />
                  </div>

                  {/* Title */}
                  <h3 className="font-semibold text-xl text-espresso mb-2">
                    {treatment.name}
                  </h3>

                  {/* Description */}
                  <p className="text-sm text-grey-dark mb-4 line-clamp-3">
                    {treatment.description}
                  </p>

                  {/* CTA */}
                  <div className="text-gold font-semibold text-sm hover:translate-x-1 transition inline-flex items-center">
                    Lihat Detail →
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <p className="text-warm-slate text-lg">
                Tidak ada treatment yang sesuai dengan pencarian Anda.
              </p>
            </div>
          )}
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-rose-gold text-white py-12 md:py-16">
        <div className="container-custom text-center">
          <h2 className="font-playfair text-3xl font-bold mb-4">
            Belum menemukan apa yang Anda cari?
          </h2>
          <p className="mb-8 max-w-2xl mx-auto">
            Hubungi tim kami untuk konsultasi gratis dan rekomendasi treatment yang sesuai dengan kebutuhan kulit Anda.
          </p>
          <Link href="/online-booking" className="btn-white">
            Konsultasi Gratis
          </Link>
        </div>
      </section>

      <Footer />
    </main>
  );
}
