import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { BookOpen, Lock, PenLine, Clock, User, Users, Library, FlaskConical, Building2, ArrowRight, Star, Quote } from "lucide-react";
import JournalSlider from "@/components/journal/JournalSlider";
import { auth } from "@/auth";

export const metadata: Metadata = { title: "Journals – KC Systems" };

const featuredPosts = [
  { id: 1, slug: "mastering-job-hunt-in-malaysia", title: "Mastering the Job Hunt in Malaysia: A Complete Guide", excerpt: "A step-by-step breakdown of how to navigate Malaysia's job market, build your resume, and land interviews at top companies.", author: "Ahmad Razif", date: "May 28, 2026", readTime: "8 min read", category: "Career", locked: true, image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=600&q=80" },
  { id: 2, slug: "scholarship-application-tips", title: "10 Tips to Win International Scholarships", excerpt: "From crafting a compelling personal statement to acing interviews — the strategies that helped our members secure full scholarships.", author: "Nurul Aina", date: "May 25, 2026", readTime: "6 min read", category: "Education", locked: true, image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=600&q=80" },
  { id: 3, slug: "top-online-business-ideas-2026", title: "Top 10 Online Business Ideas for 2026", excerpt: "The digital economy is booming. Here are the most promising business models for Malaysian entrepreneurs this year.", author: "David Tan", date: "May 20, 2026", readTime: "5 min read", category: "Business", locked: false, image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80" },
  { id: 4, slug: "work-life-balance-remote", title: "Finding Work-Life Balance as a Remote Worker", excerpt: "Remote work is here to stay. Learn how to set boundaries, stay productive, and avoid burnout while working from home.", author: "Sarah Lee", date: "May 15, 2026", readTime: "4 min read", category: "Lifestyle", locked: false, image: "https://images.unsplash.com/photo-1484788984921-03950022c9ef?w=600&q=80" },
  { id: 5, slug: "ai-in-recruitment-2026", title: "How AI is Changing Recruitment in Southeast Asia", excerpt: "Artificial Intelligence is reshaping how companies hire. Discover what candidates and recruiters need to know in 2026.", author: "Kezia Lim", date: "May 12, 2026", readTime: "7 min read", category: "Technology", locked: true, image: "https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=600&q=80" },
  { id: 6, slug: "research-methodology-guide", title: "A Beginner's Guide to Research Methodology", excerpt: "Whether you're writing a thesis or conducting industry research, this guide walks you through the key methodologies.", author: "Prof. Hassan", date: "May 8, 2026", readTime: "10 min read", category: "Education", locked: false, image: "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=600&q=80" },
];

const recentPosts = [
  { id: 7, slug: "malaysia-startup-ecosystem", title: "Malaysia's Startup Ecosystem in 2026", category: "Business", author: "Rizwan Ali", date: "May 5, 2026", readTime: "5 min", image: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=400&q=80" },
  { id: 8, slug: "stem-education-future", title: "STEM Education and the Future of Work", category: "Education", author: "Dr. Priya", date: "May 2, 2026", readTime: "6 min", image: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=400&q=80" },
  { id: 9, slug: "mental-health-workplace", title: "Mental Health in the Malaysian Workplace", category: "Lifestyle", author: "Aisha Bt Zain", date: "Apr 28, 2026", readTime: "4 min", image: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=400&q=80" },
  { id: 10, slug: "fintech-trends-2026", title: "Fintech Trends Reshaping Personal Finance", category: "Technology", author: "Marcus Ooi", date: "Apr 25, 2026", readTime: "7 min", image: "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=400&q=80" },
];

const contributors = [
  { name: "Ahmad Razif", role: "Career Strategist", articles: 14, image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&q=80" },
  { name: "Nurul Aina", role: "Education Consultant", articles: 11, image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80" },
  { name: "David Tan", role: "Business Analyst", articles: 9, image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&q=80" },
  { name: "Sarah Lee", role: "Lifestyle Editor", articles: 8, image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80" },
  { name: "Prof. Hassan", role: "Research Director", articles: 17, image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80" },
  { name: "Kezia Lim", role: "Tech Writer", articles: 6, image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&q=80" },
];

const services = [
  { icon: BookOpen, label: "Our Journals", desc: "Find out more about our world-leading peer-reviewed open-access journals, including the journal's specific information and guidelines.", id: "journals" },
  { icon: FlaskConical, label: "For Authors", desc: "This section provides all essential information for authors. We recommend reading before submitting a contribution to ensure compliance.", id: "authors" },
  { icon: Building2, label: "For Societies", desc: "Discover how we help scholarly societies and the exclusive benefits of publishing your journals with KC Systems worldwide.", id: "societies" },
  { icon: Library, label: "Librarian Portal", desc: "A dedicated portal enabling librarians to access our online content in a way that suits their budget and users' needs at all times.", id: "librarians" },
];

const partners = [
  { name: "Emerald Insight", logo: "EI", color: "bg-emerald-600" },
  { name: "Begell House", logo: "BH", color: "bg-blue-700" },
  { name: "IEEE Xplore", logo: "IEEE", color: "bg-indigo-600" },
  { name: "ScienceDirect", logo: "SD", color: "bg-orange-600" },
  { name: "OnePetro", logo: "OP", color: "bg-cyan-600" },
  { name: "SAGE Journals", logo: "SAGE", color: "bg-green-700" },
];

const categories = ["All", "Career", "Education", "Business", "Lifestyle", "Technology"];

const categoryColors: Record<string, string> = {
  Career: "bg-blue-50 text-blue-700",
  Education: "bg-emerald-50 text-emerald-700",
  Business: "bg-amber-50 text-amber-700",
  Lifestyle: "bg-purple-50 text-purple-700",
  Technology: "bg-rose-50 text-rose-700",
};

export default async function JournalPage() {
  const session = await auth();
  const role = session?.user?.role;
  const canBypassPaywall = role === "admin" || role === "super_admin";

  return (
    <div className="min-h-screen bg-neutral-50">

      {/* ── Slider ── */}
      <JournalSlider />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-20 pt-14 pb-24">

        {/* ── About Section ── */}
        <section className="grid md:grid-cols-2 gap-12 items-center">
          <div className="relative rounded-3xl overflow-hidden aspect-[4/3] shadow-xl">
            <Image
              src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=900&q=80"
              alt="Research library"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 50vw"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-navy-900/40 to-transparent" />
            <div className="absolute bottom-5 left-5 flex gap-3">
              <div className="bg-white/90 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
                <div className="text-2xl font-bold text-navy-800">500+</div>
                <div className="text-xs text-neutral-600">Journals Published</div>
              </div>
              <div className="bg-gold-500/90 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
                <div className="text-2xl font-bold text-white">12K+</div>
                <div className="text-xs text-white/90">Active Readers</div>
              </div>
            </div>
          </div>
          <div>
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-navy-50 text-navy-700 text-xs font-semibold rounded-full mb-4 border border-navy-100">
              <BookOpen size={11} /> About Our Platform
            </div>
            <h2 className="text-3xl font-bold text-navy-900 leading-tight mb-5">
              Research Publishing,<br />Simplified for All
            </h2>
            <p className="text-neutral-600 text-sm leading-relaxed mb-6">
              We provide services tailored to a diverse array of audiences, such as researchers, libraries, universities and innovative enterprises. Our offerings include processing and analyzing the most extensive structured collection of open research, complete with full texts. Additionally, we assist in managing research papers, enhancing their visibility, and ensuring compliance with funding requirements. All of these capabilities are available through <strong className="text-navy-700">KC SYSTEMS Services</strong>.
            </p>
            <div className="grid grid-cols-2 gap-4 mb-6">
              {[
                { icon: Users, label: "Researchers & Authors", desc: "Global network of academics" },
                { icon: Library, label: "Libraries & Universities", desc: "Institutional access portals" },
                { icon: Building2, label: "Enterprises & NGOs", desc: "Research-driven organizations" },
                { icon: FlaskConical, label: "Open Access Compliance", desc: "Funding-compliant publishing" },
              ].map(({ icon: Icon, label, desc }) => (
                <div key={label} className="flex gap-3 items-start p-3 bg-white rounded-xl border border-neutral-100">
                  <div className="w-8 h-8 bg-navy-50 rounded-lg flex items-center justify-center shrink-0">
                    <Icon size={15} className="text-navy-600" />
                  </div>
                  <div>
                    <div className="text-xs font-semibold text-navy-800">{label}</div>
                    <div className="text-xs text-neutral-500 mt-0.5">{desc}</div>
                  </div>
                </div>
              ))}
            </div>
            <Link href="/register" className="inline-flex items-center gap-2 px-5 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-xl hover:bg-navy-800 transition-colors">
              Get Started <ArrowRight size={15} />
            </Link>
          </div>
        </section>

        {/* ── Our Journal Services ── */}
        <section id="services">
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-50 text-gold-700 text-xs font-semibold rounded-full mb-3 border border-gold-100">
              <Star size={11} /> What We Offer
            </div>
            <h2 className="text-3xl font-bold text-navy-900 mb-3">Our Journal Services</h2>
            <p className="text-neutral-500 text-sm max-w-xl mx-auto">From publishing to discovery — everything you need to engage with peer-reviewed open-access research.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {services.map(({ icon: Icon, label, desc, id }) => (
              <div key={id} id={id} className="bg-white border border-neutral-200 rounded-2xl p-6 hover:shadow-lg hover:border-navy-200 transition-all group flex flex-col">
                <div className="w-12 h-12 bg-navy-50 rounded-xl flex items-center justify-center mb-4 group-hover:bg-navy-700 transition-colors">
                  <Icon size={22} className="text-navy-700 group-hover:text-white transition-colors" />
                </div>
                <h3 className="font-bold text-navy-900 mb-2">{label}</h3>
                <p className="text-neutral-500 text-sm leading-relaxed flex-1">{desc}</p>
                <Link href="#featured" className="mt-4 flex items-center gap-1 text-xs font-semibold text-navy-600 hover:text-navy-800">
                  Learn more <ArrowRight size={12} />
                </Link>
              </div>
            ))}
          </div>
        </section>

        {/* ── Resource Partners ── */}
        <section className="bg-white border border-neutral-200 rounded-3xl p-10">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-bold text-navy-900 mb-2">View Our Resource Links</h2>
            <p className="text-neutral-500 text-sm">Access world-class research databases and platforms through KC Systems</p>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6 items-center">
            {partners.map(({ name, logo, color }) => (
              <div key={name} className="flex flex-col items-center gap-3 group">
                <div className={`w-full h-20 relative rounded-xl overflow-hidden border border-neutral-100 ${color} flex items-center justify-center p-2 hover:shadow-md transition-shadow`}>
                  <span className="text-white font-bold text-lg">{logo}</span>
                </div>
                <span className="text-xs text-neutral-500 text-center font-medium group-hover:text-navy-700 transition-colors">{name}</span>
              </div>
            ))}
          </div>
        </section>

        {/* ── Featured Journals ── */}
        <section id="featured">
          <div className="flex items-center justify-between mb-8">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-navy-50 text-navy-700 text-xs font-semibold rounded-full mb-2 border border-navy-100">
                <BookOpen size={11} /> Featured
              </div>
              <h2 className="text-2xl font-bold text-navy-900">Featured Journals</h2>
            </div>
            <div className="flex items-center gap-3">
              <div className="flex gap-1 overflow-x-auto">
                {categories.map((c) => (
                  <button key={c} className={`shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${c === "All" ? "bg-navy-700 text-white" : "bg-white border border-neutral-200 text-neutral-600 hover:border-navy-300"}`}>{c}</button>
                ))}
              </div>
              <Link href="/journal/new" className="flex items-center gap-1.5 px-4 py-2 bg-gold-500 text-white text-xs font-semibold rounded-xl hover:bg-gold-400 transition-colors shrink-0">
                <PenLine size={13} /> Write
              </Link>
            </div>
          </div>

          {/* Subscription notice */}
          {!canBypassPaywall && (
            <div className="bg-gold-50 border border-gold-200 rounded-xl p-4 flex items-center justify-between gap-4 mb-6">
              <div className="flex items-center gap-3 text-sm">
                <Lock size={16} className="text-gold-600 shrink-0" />
                <span className="text-neutral-700"><strong>Some journals require a subscription.</strong> Join from $29/month to unlock all content.</span>
              </div>
              <Link href="/register?plan=basic" className="shrink-0 px-4 py-1.5 bg-gold-500 text-white text-sm font-semibold rounded-lg hover:bg-gold-600 transition-colors">Subscribe</Link>
            </div>
          )}

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredPosts.map((post) => {
              const isLockedForUser = post.locked && !canBypassPaywall;
              return (
              <div key={post.id} className="group bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:shadow-lg hover:border-navy-200 transition-all flex flex-col">
                <div className="relative aspect-video overflow-hidden">
                  <Image src={post.image} alt={post.title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" />
                  <div className="absolute inset-0 bg-gradient-to-t from-navy-900/50 to-transparent" />
                  <div className="absolute top-3 left-3 flex items-center gap-2">
                    <span className={`px-2.5 py-1 text-xs font-semibold rounded-full ${categoryColors[post.category] ?? "bg-neutral-100 text-neutral-600"}`}>{post.category}</span>
                    {isLockedForUser && <span className="px-2 py-1 text-xs font-semibold rounded-full bg-gold-100 text-gold-700 flex items-center gap-1"><Lock size={9} /> Members</span>}
                  </div>
                </div>
                <div className="p-5 flex flex-col flex-1">
                  <h3 className="font-semibold text-navy-800 text-sm leading-snug line-clamp-2 mb-2 group-hover:text-navy-600">
                    {isLockedForUser ? post.title : <Link href={`/journal/${post.slug}`}>{post.title}</Link>}
                  </h3>
                  <p className="text-neutral-500 text-xs leading-relaxed line-clamp-2 mb-4 flex-1">{post.excerpt}</p>
                  <div className="flex items-center justify-between text-xs text-neutral-400 pt-3 border-t border-neutral-100">
                    <span className="flex items-center gap-1"><User size={10} /> {post.author}</span>
                    <span className="flex items-center gap-1"><Clock size={10} /> {post.readTime}</span>
                    <span>{post.date}</span>
                  </div>
                  {isLockedForUser ? (
                    <Link href="/register?plan=basic" className="mt-3 flex items-center gap-1.5 text-xs font-semibold text-gold-600 hover:text-gold-700">
                      <Lock size={11} /> Subscribe to read
                    </Link>
                  ) : (
                    <Link href={`/journal/${post.slug}`} className="mt-3 flex items-center gap-1.5 text-xs font-semibold text-navy-700 hover:text-navy-900">
                      <BookOpen size={11} /> Read article <ArrowRight size={11} />
                    </Link>
                  )}
                </div>
              </div>
            )})}
          </div>
        </section>

        {/* ── Recent Posts (horizontal) ── */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-bold text-navy-900">Recently Published</h2>
            <Link href="/journal" className="text-sm text-navy-700 hover:text-navy-900 font-medium flex items-center gap-1">View all <ArrowRight size={14} /></Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {recentPosts.map((p) => (
              <Link key={p.id} href={`/journal/${p.slug}`} className="group bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:shadow-md transition-all flex flex-col">
                <div className="relative h-36 overflow-hidden">
                  <Image src={p.image} alt={p.title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" sizes="(max-width: 640px) 100vw, 25vw" />
                  <div className="absolute top-2 left-2">
                    <span className={`px-2 py-0.5 text-xs font-semibold rounded-full ${categoryColors[p.category] ?? "bg-neutral-100 text-neutral-600"}`}>{p.category}</span>
                  </div>
                </div>
                <div className="p-4 flex-1 flex flex-col">
                  <h3 className="font-semibold text-neutral-900 text-sm leading-snug line-clamp-2 group-hover:text-navy-700 flex-1">{p.title}</h3>
                  <div className="flex items-center justify-between mt-3 text-xs text-neutral-400 pt-2 border-t border-neutral-100">
                    <span className="flex items-center gap-1"><User size={10} /> {p.author}</span>
                    <span>{p.readTime}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </section>

        {/* ── Top Contributors ── */}
        <section className="bg-navy-900 rounded-3xl px-8 py-12">
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-3 border border-gold-500/30">
              <Users size={11} /> Community
            </div>
            <h2 className="text-2xl font-bold text-white mb-2">Top Contributors</h2>
            <p className="text-navy-300 text-sm">Meet the researchers and writers behind KC Systems' most-read journals</p>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-5">
            {contributors.map((c) => (
              <div key={c.name} className="flex flex-col items-center text-center group">
                <div className="relative w-16 h-16 rounded-2xl overflow-hidden border-2 border-navy-700 group-hover:border-gold-400 transition-colors mb-3">
                  <Image src={c.image} alt={c.name} fill className="object-cover" sizes="64px" />
                </div>
                <div className="text-sm font-semibold text-white">{c.name}</div>
                <div className="text-xs text-navy-400 mt-0.5">{c.role}</div>
                <div className="mt-1.5 px-2.5 py-0.5 bg-gold-500/20 text-gold-300 text-xs rounded-full border border-gold-500/20">{c.articles} articles</div>
              </div>
            ))}
          </div>
        </section>

        {/* ── Testimonial / Quote ── */}
        <section className="relative overflow-hidden bg-gradient-to-br from-navy-50 to-white border border-navy-100 rounded-3xl p-10">
          <Quote size={64} className="absolute top-6 right-8 text-navy-100" />
          <div className="max-w-2xl">
            <p className="text-xl text-navy-800 font-medium leading-relaxed italic mb-6">
              &ldquo;KC Systems has transformed how our institution manages and publishes academic research. The platform's compliance tools and visibility features are unmatched.&rdquo;
            </p>
            <div className="flex items-center gap-4">
              <div className="relative w-12 h-12 rounded-full overflow-hidden">
                <Image src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80" alt="Prof. Hassan" fill className="object-cover" sizes="48px" />
              </div>
              <div>
                <div className="font-semibold text-navy-900 text-sm">Prof. Hassan Al-Rashid</div>
                <div className="text-xs text-neutral-500">Research Director, University of Malaya</div>
              </div>
              <div className="ml-auto flex gap-0.5">
                {[1,2,3,4,5].map(i => <Star key={i} size={14} className="text-gold-500 fill-gold-500" />)}
              </div>
            </div>
          </div>
        </section>

        {/* ── CTA ── */}
        <section className="bg-navy-800 rounded-3xl overflow-hidden">
          <div className="grid md:grid-cols-2">
            <div className="p-10 flex flex-col justify-center">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-4 border border-gold-500/30 w-fit">
                <PenLine size={11} /> Start Today
              </div>
              <h2 className="text-2xl md:text-3xl font-bold text-white leading-tight mb-3">
                Publish, Discover &amp;<br />Grow with KC Systems
              </h2>
              <p className="text-navy-300 text-sm leading-relaxed mb-6">
                Whether you are an author, researcher, institution, or knowledge seeker — KC Systems gives you the platform to reach a global academic audience.
              </p>
              <div className="flex flex-wrap gap-3">
                <Link href="/register" className="inline-flex items-center gap-2 px-5 py-2.5 bg-gold-500 text-white font-semibold text-sm rounded-xl hover:bg-gold-400 transition-colors">
                  Create Account <ArrowRight size={15} />
                </Link>
                <Link href="/journal/new" className="inline-flex items-center gap-2 px-5 py-2.5 bg-white/10 text-white font-medium text-sm rounded-xl hover:bg-white/20 transition-colors border border-white/20">
                  <PenLine size={14} /> Write a Journal
                </Link>
              </div>
            </div>
            <div className="relative hidden md:block min-h-[260px]">
              <Image
                src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=800&q=80"
                alt="Library research"
                fill
                className="object-cover"
                sizes="50vw"
              />
              <div className="absolute inset-0 bg-gradient-to-l from-transparent to-navy-800/40" />
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}