import { useParams, useNavigate } from "react-router-dom";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { Button } from "../components/ui/button";
import { ArrowLeft, Clock, Calendar } from "lucide-react";

const magazineData = {
  1: {
    title: "Luxury Escapes: Exclusive Accommodations You Need to Experience",
    subtitle: "Discover the world's most exclusive luxury accommodations that redefine comfort and elegance",
    image: "/src/assets/accommodation-1.jpg",
    date: "März 15, 2024",
    readTime: "5 min read",
    author: {
      name: "Anna Obermeier",
      bio: "Anna ist eine erfahrene Reiseexpertin mit über 10 Jahren Erfahrung in der Luxus-Hospitality-Branche.",
      avatar: "/src/assets/accommodation-2.jpg"
    },
    content: {
      intro: "In einer Welt, in der Reisen mehr als nur eine Notwendigkeit geworden ist, sondern eine Kunstform der Entspannung und des Luxus, stehen exklusive Unterkünfte im Mittelpunkt unvergesslicher Erfahrungen.",
      sections: [
        {
          title: "Sophisticated Stays: Defining Your Dream Retreat",
          content: "Luxusunterkünfte sind mehr als nur ein Ort zum Übernachten – sie sind Refugien des Komforts, die jeden Aspekt Ihres Aufenthalts durchdacht gestalten."
        },
        {
          title: "Must-Have Amenities",
          content: "Von privaten Butlern bis hin zu maßgeschneiderten Wellness-Behandlungen bieten diese Unterkünfte Services, die jeden Wunsch antizipieren."
        },
        {
          title: "Navigating the Seas of Options",
          content: "Bei der Auswahl der perfekten Luxusunterkunft sollten Sie verschiedene Faktoren berücksichtigen, um sicherzustellen, dass Ihr Aufenthalt Ihre Erwartungen übertrifft."
        }
      ]
    }
  },
  2: {
    title: "The Ultimate Guide to Finding Your Dream Vacation Rental",
    subtitle: "Learn the insider secrets to discovering and booking the perfect vacation rental",
    image: "/src/assets/accommodation-2.jpg",
    date: "März 12, 2024",
    readTime: "8 min read",
    author: {
      name: "Anna Obermeier",
      bio: "Anna ist eine erfahrene Reiseexpertin mit über 10 Jahren Erfahrung in der Luxus-Hospitality-Branche.",
      avatar: "/src/assets/accommodation-2.jpg"
    },
    content: {
      intro: "Die Suche nach der perfekten Ferienwohnung kann überwältigend sein, aber mit den richtigen Strategien finden Sie Ihr Traumdomizil.",
      sections: [
        {
          title: "Sophisticated Stays: Defining Your Dream Retreat",
          content: "Beginnen Sie mit einer klaren Vision dessen, was Sie von Ihrer Unterkunft erwarten. Jeder Reisende hat unterschiedliche Prioritäten."
        },
        {
          title: "Must-Have Amenities", 
          content: "Erstellen Sie eine Liste der unverzichtbaren Annehmlichkeiten, die Ihren Aufenthalt zu einem besonderen Erlebnis machen."
        },
        {
          title: "Navigating the Seas of Options",
          content: "Mit Millionen von Optionen online kann die Auswahl entmutigend sein. Hier sind bewährte Strategien zur Eingrenzung Ihrer Suche."
        }
      ]
    }
  }
};

const MagazinDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const articleId = parseInt(id || "1");
  const article = magazineData[articleId as keyof typeof magazineData] || magazineData[1];

  const relatedArticles = Object.entries(magazineData)
    .filter(([key]) => parseInt(key) !== articleId)
    .slice(0, 2)
    .map(([key, data]) => ({ id: key, ...data }));

  return (
    <div className="min-h-screen">
      <Header />
      
      {/* Back Navigation */}
      <div className="pt-20 pb-4">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <Button
            variant="ghost"
            onClick={() => navigate("/magazin")}
            className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
          >
            <ArrowLeft className="w-4 h-4" />
            Zurück zum Magazin
          </Button>
        </div>
      </div>

      {/* Article Header */}
      <article className="pb-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <header className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-light text-foreground mb-6 font-secondary leading-tight">
              {article.title}
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              {article.subtitle}
            </p>
            <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Calendar className="w-4 h-4" />
                <span>{article.date}</span>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4" />
                <span>{article.readTime}</span>
              </div>
            </div>
          </header>

          {/* Featured Image */}
          <div className="mb-12 overflow-hidden rounded-lg">
            <img
              src={article.image}
              alt={article.title}
              className="w-full h-64 md:h-96 object-cover"
            />
          </div>

          <div className="grid md:grid-cols-4 gap-12">
            {/* Main Content */}
            <div className="md:col-span-3">
              <div className="prose prose-lg max-w-none">
                <p className="text-lg text-muted-foreground leading-relaxed mb-8">
                  {article.content.intro}
                </p>

                {article.content.sections.map((section, index) => (
                  <section key={index} className="mb-10">
                    <h2 className="text-2xl font-medium text-foreground mb-4 font-secondary">
                      {index + 1}. {section.title}
                    </h2>
                    <p className="text-muted-foreground leading-relaxed">
                      {section.content}
                    </p>
                  </section>
                ))}
              </div>
            </div>

            {/* Sidebar */}
            <div className="md:col-span-1">
              <div className="sticky top-24">
                <div className="bg-card rounded-lg p-6 mb-8">
                  <h3 className="font-medium text-foreground mb-4">Inhaltsverzeichnis</h3>
                  <nav className="space-y-2">
                    {article.content.sections.map((section, index) => (
                      <a
                        key={index}
                        href={`#section-${index}`}
                        className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
                      >
                        {index + 1}. {section.title}
                      </a>
                    ))}
                  </nav>
                </div>

                <div className="bg-card rounded-lg p-6">
                  <h3 className="font-medium text-foreground mb-4">Artikel teilen</h3>
                  <div className="space-y-2">
                    <Button variant="outline" size="sm" className="w-full justify-start">
                      LinkedIn
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start">
                      Twitter
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start">
                      Facebook
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>

      {/* Author Section */}
      <section className="py-16 bg-muted">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-light text-foreground mb-12 text-center font-secondary">
            meet author
          </h2>
          
          <div className="grid md:grid-cols-3 gap-8">
            {/* Author Info */}
            <div className="md:col-span-1">
              <div className="text-center mb-8">
                <img
                  src={article.author.avatar}
                  alt={article.author.name}
                  className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
                />
                <h3 className="font-medium text-foreground mb-2 font-secondary">
                  {article.author.name}
                </h3>
                <p className="text-sm text-muted-foreground">
                  {article.author.bio}
                </p>
              </div>
            </div>

            {/* Related Articles */}
            <div className="md:col-span-2">
              <div className="grid md:grid-cols-2 gap-6">
                {relatedArticles.map((relatedArticle) => (
                  <div key={relatedArticle.id} className="group cursor-pointer">
                    <div className="overflow-hidden rounded-lg mb-4">
                      <img
                        src={relatedArticle.image}
                        alt={relatedArticle.title}
                        className="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105"
                      />
                    </div>
                    <h4 className="font-medium text-foreground group-hover:text-secondary transition-colors text-sm">
                      {relatedArticle.title}
                    </h4>
                    <p className="text-xs text-muted-foreground mt-1">
                      {relatedArticle.date}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Bottom CTA */}
      <section className="py-20 bg-dark-background text-dark-foreground">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="max-w-2xl mx-auto">
            <h2 className="text-3xl font-light mb-6 font-secondary">
              We're committed to your{" "}
              <span className="text-secondary font-medium">comfort</span> and{" "}
              <span className="text-secondary font-medium">satisfaction</span>{" "}
              for unforgettable experiences.
            </h2>
            
            <Button 
              className="bg-secondary hover:bg-secondary/90 text-white font-medium px-8 py-3 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg"
            >
              Entdecken Sie mehr
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default MagazinDetail;