import React from 'react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { PROGRAMMATIC_SOLUTIONS, getProgrammaticPage, ALL_PROGRAMMATIC_PAGES } from '@/data/programmatic-seo';
import ContactForm from '@/components/ContactForm';
import { 
  CheckCircle2, 
  ArrowRight, 
  HelpCircle, 
  ChevronRight, 
  Layers, 
  Sparkles,
  Target
} from 'lucide-react';

interface Props {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return PROGRAMMATIC_SOLUTIONS.map(sol => ({
    slug: sol.slug
  }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const page = getProgrammaticPage(slug);

  if (!page) {
    return {
      title: 'Çözüm Bulunamadı | Baybars Bilim'
    };
  }

  return {
    title: page.seoTitle,
    description: page.metaDescription,
    alternates: {
      canonical: `/cozumler/${page.slug}`
    },
    openGraph: {
      title: page.seoTitle,
      description: page.metaDescription,
      url: `https://baybarsbilim.com.tr/cozumler/${page.slug}`,
      type: 'article',
      locale: 'tr_TR'
    },
    twitter: {
      card: 'summary_large_image',
      title: page.seoTitle,
      description: page.metaDescription
    }
  };
}

export default async function SolutionDetailPage({ params }: Props) {
  const { slug } = await params;
  const page = getProgrammaticPage(slug);

  if (!page || page.type !== 'solution') {
    notFound();
  }

  const solutionJsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'Service',
        name: page.title,
        description: page.metaDescription,
        provider: {
          '@type': 'Person',
          name: 'Baybars Bilim',
          url: 'https://baybarsbilim.com.tr'
        }
      },
      {
        '@type': 'BreadcrumbList',
        itemListElement: [
          {
            '@type': 'ListItem',
            position: 1,
            name: 'Ana Sayfa',
            item: 'https://baybarsbilim.com.tr'
          },
          {
            '@type': 'ListItem',
            position: 2,
            name: 'Çözümler',
            item: 'https://baybarsbilim.com.tr/#cozumler'
          },
          {
            '@type': 'ListItem',
            position: 3,
            name: page.title,
            item: `https://baybarsbilim.com.tr/cozumler/${page.slug}`
          }
        ]
      },
      {
        '@type': 'FAQPage',
        mainEntity: page.faqs.map(faq => ({
          '@type': 'Question',
          name: faq.question,
          acceptedAnswer: {
            '@type': 'Answer',
            text: faq.answer
          }
        }))
      }
    ]
  };

  const relatedPages = ALL_PROGRAMMATIC_PAGES.filter(p => page.relatedSlugs.includes(p.slug));

  return (
    <main className="relative z-10 py-12">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(solutionJsonLd) }}
      />

      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
        
        {/* Breadcrumb Navigation */}
        <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-xs font-mono text-slate-400">
          <Link href="/" className="hover:text-cyan-400 transition-colors">Ana Sayfa</Link>
          <ChevronRight className="w-3 h-3 text-slate-600" />
          <Link href="/#cozumler" className="hover:text-cyan-400 transition-colors">Sektörel Çözümler</Link>
          <ChevronRight className="w-3 h-3 text-slate-600" />
          <span className="text-cyan-400 font-semibold">{page.title}</span>
        </nav>

        {/* Hero */}
        <header className="space-y-6">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-mono">
            <Target className="w-3.5 h-3.5" />
            <span>{page.badge}</span>
          </div>

          <h1 className="text-3xl sm:text-5xl font-extrabold text-white leading-tight tracking-tight">
            {page.headline}
          </h1>

          <p className="text-lg sm:text-xl text-slate-300 leading-relaxed font-medium">
            {page.subheadline}
          </p>

          <div className="p-4 rounded-xl bg-slate-900/60 border border-slate-800 text-xs font-mono text-slate-400 flex items-center gap-2">
            <span className="text-indigo-400 font-bold uppercase">Hedef Kitle:</span>
            <span>{page.targetAudience}</span>
          </div>
        </header>

        {/* Overview */}
        <section className="glass-card rounded-3xl p-8 sm:p-10 border border-slate-800 space-y-4">
          <h2 className="text-xl font-bold text-white flex items-center gap-2 font-mono">
            <Layers className="w-5 h-5 text-indigo-400" />
            <span>Sektörel Dinamikler & Çözüm Mimarisi</span>
          </h2>
          <p className="text-slate-300 text-base leading-relaxed">
            {page.overview}
          </p>
        </section>

        {/* Benefits */}
        <section className="space-y-6">
          <div className="space-y-1">
            <div className="text-xs font-mono uppercase text-indigo-400 tracking-wider">Kritik Kazanımlar</div>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-white">
              Sektörünüze Özel Sağlanan Avantajlar
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {page.benefits.map((b, idx) => (
              <div key={idx} className="glass-card rounded-2xl p-6 border border-slate-800 flex flex-col justify-between space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <h3 className="font-bold text-white text-base">{b.title}</h3>
                    {b.metric && (
                      <span className="text-xs font-mono font-bold text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
                        {b.metric}
                      </span>
                    )}
                  </div>
                  <p className="text-slate-400 text-xs leading-relaxed">
                    {b.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* FAQs */}
        {page.faqs.length > 0 && (
          <section className="space-y-6">
            <div className="space-y-1">
              <div className="text-xs font-mono uppercase text-cyan-400 tracking-wider">Sıkça Sorulan Sorular</div>
              <h2 className="text-2xl sm:text-3xl font-extrabold text-white flex items-center gap-2">
                <HelpCircle className="w-6 h-6 text-cyan-400" />
                <span>Merak Edilenler</span>
              </h2>
            </div>

            <div className="space-y-4">
              {page.faqs.map((faq, idx) => (
                <div key={idx} className="glass-card rounded-2xl p-6 border border-slate-800 space-y-2">
                  <h3 className="font-bold text-white text-base flex items-start gap-2">
                    <span className="text-cyan-400 font-mono">Q:</span>
                    <span>{faq.question}</span>
                  </h3>
                  <p className="text-slate-300 text-sm leading-relaxed pl-6">
                    {faq.answer}
                  </p>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Cross Linking */}
        {relatedPages.length > 0 && (
          <section className="pt-8 border-t border-slate-800 space-y-4">
            <h3 className="text-xs font-mono uppercase tracking-wider text-slate-400">
              İlgili Hizmetler & Teknolojiler
            </h3>
            <div className="flex flex-wrap gap-3">
              {relatedPages.map(rp => (
                <Link
                  key={rp.slug}
                  href={rp.type === 'service' ? `/hizmetler/${rp.slug}` : rp.type === 'solution' ? `/cozumler/${rp.slug}` : `/teknolojiler/${rp.slug}`}
                  className="px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 hover:border-cyan-500/40 text-xs text-slate-300 hover:text-white font-mono flex items-center gap-1.5 transition-colors"
                >
                  <span>{rp.title}</span>
                  <ArrowRight className="w-3 h-3 text-cyan-400" />
                </Link>
              ))}
            </div>
          </section>
        )}

        {/* Contact CTA */}
        <section className="pt-8">
          <div className="text-center max-w-2xl mx-auto mb-10 space-y-3">
            <h2 className="text-2xl sm:text-3xl font-bold text-white">
              Sektörünüze Özel Büyüme Kuralım
            </h2>
            <p className="text-slate-400 text-sm">
              Doğrudan projenizin ayrıntılarını konuşmak için formu doldurun.
            </p>
          </div>
          <ContactForm />
        </section>

      </div>
    </main>
  );
}