'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useParams } from 'next/navigation';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { treatments } from '@/data/treatments';
import { useLanguage } from '@/context/LanguageContext';

export default function TreatmentDetailPage() {
  const params = useParams();
  const id = params.id as string;
  const { t } = useLanguage();
  const [loading, setLoading] = useState(true);

  const treatment = treatments.find((t) => t.id === id);

  useEffect(() => {
    setLoading(false);
  }, []);

  if (loading) {
    return (
      <main className="min-h-screen bg-ivory">
        <Navbar />
        <div className="container-custom text-center py-24">
          <div className="text-5xl mb-4">⏳</div>
          <h1 className="font-cormorant text-3xl font-bold text-espresso">Memuat detail treatment...</h1>
        </div>
        <Footer />
      </main>
    );
  }

  if (!treatment) {
    return (
      <main className="min-h-screen bg-ivory">
        <Navbar />
        <div className="container-custom text-center py-24">
          <p className="text-5xl mb-4">🏥</p>
          <h1 className="font-cormorant text-3xl font-bold text-espresso mb-4">Treatment tidak ditemukan</h1>
          <Link href="/treatments" className="text-gold hover:underline font-semibold">
            &larr; Kembali ke Treatment
          </Link>
        </div>
        <Footer />
      </main>
    );
  }

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

      {/* Hero + Breadcrumb */}
      <section className="relative py-12 md:py-16 bg-gold">
        <div className="container-custom text-center text-white relative z-10">
          <nav className="mb-4 text-xs tracking-widest uppercase text-white">
            <Link href="/" className="hover:text-white/80 transition text-white">Home</Link>
            <span className="mx-2 text-white">/</span>
            <Link href="/treatments" className="hover:text-white/80 transition text-white">Treatments</Link>
            <span className="mx-2 text-white">/</span>
            <span className="text-white/60">{treatment.name}</span>
          </nav>
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase">{treatment.name}</h1>
          <p className="text-lg text-white/90 max-w-2xl mx-auto">{treatment.description}</p>
        </div>
      </section>

      {/* Content */}
      <section className="py-16">
        <div className="container-custom max-w-4xl">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            {/* Main Info */}
            <div className="md:col-span-2">
              <div className="mb-6">
                <Image src="/images/Logo-Carla.png" alt="Carla Skin Clinic" width={120} height={40} className="h-10 w-auto object-contain" />
              </div>

              <div className="prose max-w-none">
                <h2 className="font-cormorant text-3xl font-bold text-espresso mb-4">Deskripsi</h2>
                <p className="text-grey-dark leading-relaxed mb-6">{treatment.description}</p>

                <h2 className="font-cormorant text-3xl font-bold text-espresso mb-4 mt-8">Manfaat Treatment</h2>
                <ul className="space-y-2">
                  {treatment.benefits.map((benefit, idx) => (
                    <li key={idx} className="flex items-start gap-3 text-grey-dark">
                      <Image src="/images/Logo-Carla.png" alt="" width={16} height={16} className="w-4 h-4 mt-1 object-contain flex-shrink-0" />
                      <span>{benefit}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="mt-8 p-6 bg-blush rounded-lg">
                <h3 className="font-cormorant text-xl font-bold text-espresso mb-3">💡 Cocok Untuk Anda?</h3>
                <p className="text-grey-dark text-sm mb-4">
                  Jika Anda memiliki keluhan terkait dengan treatment ini, konsultasikan terlebih dahulu dengan dokter kami untuk mendapatkan rekomendasi yang tepat.
                </p>
                <Link href="/online-booking" className="btn-primary inline-block">
                  Booking Sekarang →
                </Link>
              </div>
            </div>

            {/* Sidebar CTA */}
            <div className="md:col-span-1">
              <div className="sticky top-24 space-y-4">
                <div className="bg-gold text-white p-6 rounded-lg text-center">
                  <div className="mb-3 flex justify-center">
                    <Image src="/images/Logo-Carla.png" alt="Carla Skin Clinic" width={100} height={35} className="h-8 w-auto object-contain brightness-0 invert" />
                  </div>
                  <h3 className="font-cormorant text-2xl font-bold mb-4">{treatment.name}</h3>
                  <Link href="/online-booking" className="block w-full px-6 py-3 bg-white text-gold text-xs uppercase tracking-widest font-semibold rounded hover:bg-ivory transition">
                    Booking Sekarang
                  </Link>
                </div>

                <div className="bg-white p-6 rounded-lg border border-blush">
                  <h4 className="font-semibold text-espresso mb-3">📋 Info Penting</h4>
                  <ul className="text-sm text-grey-dark space-y-2">
                    <li>✓ Minimal 1 hari sebelum booking</li>
                    <li>✓ Konsultasi dokter gratis</li>
                    <li>✓ Aman untuk semua jenis kulit</li>
                    <li>✓ Tidak ada downtime</li>
                  </ul>
                </div>

                <div className="bg-ivory p-6 rounded-lg border border-blush">
                  <h4 className="font-semibold text-espresso mb-3">❓ Pertanyaan?</h4>
                  <p className="text-sm text-grey-dark mb-4">Hubungi tim kami untuk informasi lebih lanjut</p>
                  <a href="https://wa.me/6281234567890" target="_blank" rel="noopener noreferrer" className="block text-center px-4 py-2 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold-dark transition">
                    Chat WhatsApp
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
