/* ====================================================
* About Page (Giới thiệu)
* ==================================================== */

import Image from 'next/image';
import { HiOutlineCheckCircle } from 'react-icons/hi';
import Breadcrumb from '@/components/layout/Breadcrumb';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { generateSEO } from '@/utils/seo';
import { aboutData as mockAboutData, companyStats as mockStats } from '@/data/mock-data';
import { coreService } from '@/services/coreService';
import { Metadata } from 'next';

export const metadata: Metadata = generateSEO({
  title: 'Giới thiệu về Vitalist Pharma',
  description: 'Tìm hiểu về lịch sử hình thành, tầm nhìn, sứ mệnh và các giá trị cốt lõi của công ty dược phẩm Vitalist Pharma.',
  url: '/gioi-thieu',
});

export default async function AboutPage() {
  const [aboutData, companyStats] = await Promise.all([
    coreService.getAbout().catch(() => null),
    Promise.resolve([] as any[]), // coreService.getCompanyStats() does not exist
  ]);

  const coreValues = (aboutData?.core_values && aboutData.core_values.length > 0)
    ? aboutData.core_values
    : mockAboutData.coreValues.map((v, i) => ({ id: i + 1, title: v.title, description: v.description, icon: v.icon, order: i }));
  const historyText = aboutData?.history || mockAboutData.history;
  const visionText = aboutData?.vision || mockAboutData.vision;
  const missionText = aboutData?.mission || mockAboutData.mission;
  const openLetterText = aboutData?.open_letter || '';
  const stats = (Array.isArray(companyStats) && companyStats.length > 0) ? companyStats : mockStats.map((s, i) => ({ id: i + 1, ...s, order: i }));
  const factoryImages = (aboutData?.factory_images && aboutData.factory_images.length > 0)
    ? aboutData.factory_images.map(fi => fi.image)
    : mockAboutData.factory.images;
  const factoryTitle = aboutData?.factory_title || mockAboutData.factory.title;
  const factoryDescription = aboutData?.factory_description || mockAboutData.factory.description;
  const videoUrl = aboutData?.video_url || mockAboutData.videoUrl;
  // Safe about object — never null for template usage
  const about = {
    history: historyText,
    vision: visionText,
    mission: missionText,
    open_letter: openLetterText,
    core_values: coreValues,
  };

  return (
    <>
      <Breadcrumb items={[{ label: 'Giới thiệu', href: '/gioi-thieu' }]} />

      {/* Hero Section */}
      <section className="relative py-20 bg-dark-900 overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src={factoryImages[0] || '/images/about/factory-1.jpg'}
            alt="Vitalist Pharma Factory"
            fill
            className="object-cover opacity-30"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-dark-900/90 to-dark-900/60" />
        </div>

        <div className="container-custom relative z-10">
          <ScrollReveal animation="fadeUp">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
              Về chúng tôi
            </h1>
            <p className="text-lg md:text-xl text-white/80 max-w-2xl leading-relaxed">
              Hành trình 20 năm mang đến những sản phẩm dược phẩm chất lượng cao, góp phần nâng cao sức khỏe cho hàng triệu người dân Việt Nam.
            </p>
          </ScrollReveal>
        </div>
      </section>

      {/* Open Letter */}
      {about.open_letter && (
        <section className="section-padding bg-surface-50">
          <div className="container-custom">
            <ScrollReveal>
              <div className="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-2xl shadow-card">
                <h2 className="text-3xl font-bold text-primary-600 mb-8 text-center uppercase border-b-2 border-primary-100 pb-4">Thư ngỏ</h2>
                <div
                  className="prose prose-lg max-w-none text-dark-600"
                  dangerouslySetInnerHTML={{ __html: about.open_letter }}
                />
              </div>
            </ScrollReveal>
          </div>
        </section>
      )}

      {/* History & Overview */}
      <section className="section-padding bg-white">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <ScrollReveal animation="fadeLeft">
              <h2 className="text-3xl md:text-4xl font-bold text-dark-800 mb-6">
                {aboutData?.history_title || 'Câu chuyện của Vitalist Pharma'}
              </h2>
              <div
                className="prose prose-lg text-dark-500 max-w-none"
                dangerouslySetInnerHTML={{ __html: about.history || '' }}
              />
            </ScrollReveal>

            <ScrollReveal animation="fadeRight">
              <div className="grid grid-cols-2 gap-4">
                {factoryImages.slice(0, 4).map((img, idx) => (
                  <div key={idx} className={`relative rounded-xl overflow-hidden ${idx === 0 || idx === 3 ? 'aspect-square' : 'aspect-[4/3]'} shadow-md hover:shadow-xl transition-shadow`}>
                    <Image src={img} alt={`Factory ${idx + 1}`} fill className="object-cover hover:scale-110 transition-transform duration-500" />
                  </div>
                ))}
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-16 bg-primary-600">
        <div className="container-custom">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
            {stats.map((stat, index) => (
              <ScrollReveal key={(stat as any).id ?? index} animation="scaleIn" delay={index * 0.1}>
                <div className="text-center text-white">
                  <div className="text-4xl md:text-5xl font-bold mb-2">{stat.value}{stat.suffix}</div>
                  <div className="text-sm text-primary-100 uppercase tracking-wider">{stat.label}</div>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Vision & Mission */}
      <section className="section-padding bg-surface-50">
        <div className="container-custom">
          <SectionHeader
            subtitle="Định hướng phát triển"
            title="Tầm nhìn & Sứ mệnh"
            description="Định hướng chiến lược và mục tiêu dài hạn của Vitalist Pharma trên con đường phát triển."
          />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <ScrollReveal animation="fadeUp" delay={0.1}>
              <div className="bg-white rounded-2xl p-8 shadow-card text-center h-full">
                <div className="w-16 h-16 mx-auto rounded-full bg-primary-50 flex items-center justify-center text-3xl mb-6">
                  👁️
                </div>
                <h3 className="text-2xl font-bold text-dark-800 mb-4">Tầm nhìn</h3>
                <div
                  className="text-dark-500 leading-relaxed prose max-w-none text-left"
                  dangerouslySetInnerHTML={{ __html: about.vision || '' }}
                />
              </div>
            </ScrollReveal>

            <ScrollReveal animation="fadeUp" delay={0.2}>
              <div className="bg-white rounded-2xl p-8 shadow-card text-center h-full">
                <div className="w-16 h-16 mx-auto rounded-full bg-secondary-50 flex items-center justify-center text-3xl mb-6">
                  🎯
                </div>
                <h3 className="text-2xl font-bold text-dark-800 mb-4">Sứ mệnh</h3>
                <div
                  className="text-dark-500 leading-relaxed prose max-w-none text-left"
                  dangerouslySetInnerHTML={{ __html: about.mission || '' }}
                />
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Core Values */}
      <section className="section-padding bg-white">
        <div className="container-custom">
          <SectionHeader
            subtitle="Giá trị cốt lõi"
            title="Nguyên tắc hoạt động"
            description="Những giá trị định hình văn hóa và phương châm hành động của mọi nhân viên."
          />

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {about.core_values.map((value, index) => (
              <ScrollReveal key={value.id ?? index} animation="fadeUp" delay={index * 0.1}>
                <div className="p-6 rounded-2xl border border-surface-200 hover:border-primary-300 hover:shadow-card transition-all h-full bg-white">
                  <div className="w-12 h-12 rounded-xl bg-primary-50 flex items-center justify-center mb-4">
                    {value.icon?.startsWith('fa') ? (
                      <i className={`${value.icon} text-primary-500 text-xl`} aria-hidden="true" />
                    ) : (
                      <span className="text-3xl">{value.icon}</span>
                    )}
                  </div>
                  <h3 className="text-xl font-bold text-dark-800 mb-3">{value.title}</h3>
                  <p className="text-dark-500 text-sm leading-relaxed">{value.description}</p>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Video / Factory */}
      <section className="section-padding bg-dark-900 text-white text-center">
        <div className="container-custom">
          <SectionHeader
            subtitle="Cơ sở vật chất"
            title={factoryTitle}
            description={factoryDescription}
            light
          />

          <ScrollReveal>
            <div className="max-w-4xl mx-auto aspect-video rounded-2xl overflow-hidden shadow-2xl relative group">
              <iframe
                src={videoUrl ? videoUrl.replace('watch?v=', 'embed/').split('&')[0] : ''}
                className="w-full h-full"
                title="Vitalist Pharma Factory"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </div>
          </ScrollReveal>
        </div>
      </section>
    </>
  );
}