import React, { useEffect, useState } from 'react';
import { motion } from 'motion/react';
import { BookOpen, Monitor, Smartphone, Apple, PlayCircle, Send, ExternalLink } from 'lucide-react';
import { api } from '../services/api';
import type { Tutorial } from '../types';

const fallbackTutorials = [
  { id: 'windows', title: 'آموزش اتصال در ویندوز', description: 'نصب برنامه WireGuard، وارد کردن کانفیگ و فعال کردن تونل در کامپیوتر.', platform: 'Windows' as const, aparatUrl: '', embedUrl: '', thumbnail: '', active: true },
  { id: 'android', title: 'آموزش اتصال در اندروید', description: 'آموزش نصب WireGuard، اسکن QR یا وارد کردن فایل کانفیگ و اتصال.', platform: 'Android' as const, aparatUrl: '', embedUrl: '', thumbnail: '', active: true },
  { id: 'ios', title: 'آموزش اتصال در آیفون و iOS', description: 'آموزش نصب WireGuard، افزودن تونل و فعال کردن اتصال در iPhone و iPad.', platform: 'iOS' as const, aparatUrl: '', embedUrl: '', thumbnail: '', active: true },
];

export const TutorialsSection: React.FC = () => {
  const [tutorials, setTutorials] = useState<Tutorial[]>(fallbackTutorials as Tutorial[]);

  useEffect(() => {
    api.getTutorials().then(items => { if (items.length) setTutorials(items); }).catch(() => {});
  }, []);

  return (
    <section className="relative py-14 sm:py-20 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_50%_0%,rgba(124,58,237,.14),transparent_38%)]" />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="max-w-3xl mr-auto text-right mb-10">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-200 text-xs font-bold">
            <BookOpen className="w-4 h-4 text-purple-400" /> آموزش رایگان اتصال
          </div>
          <h1 className="mt-4 text-3xl sm:text-5xl font-black text-white leading-tight">اتصال به WireGuard سخت نیست.</h1>
          <p className="mt-4 text-sm sm:text-base text-zinc-400 leading-8">اگر برای اولین بار از WireGuard استفاده می‌کنی، آموزش مناسب دستگاهت را انتخاب کن. ویدیوهای آموزشی اختصاصی ZaccShop به‌مرور در همین صفحه قرار می‌گیرند.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {tutorials.map((item, index) => {
            const Icon = item.platform === 'Windows' ? Monitor : item.platform === 'Android' ? Smartphone : Apple;
            return (
              <motion.article key={item.key} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: .35, delay: index * .07 }} className="group rounded-3xl border border-purple-500/15 bg-[#0d0a12] overflow-hidden hover:border-purple-500/35 transition-all">
                <div className="aspect-video bg-gradient-to-br from-[#191126] to-[#08070b] relative flex items-center justify-center overflow-hidden">
                  {item.thumbnail && <img src={item.thumbnail} alt={item.title} className="absolute inset-0 w-full h-full object-cover opacity-70" />}
                  {item.embedUrl ? <iframe src={item.embedUrl} title={item.title} className="absolute inset-0 w-full h-full" allowFullScreen loading="lazy" /> : null}
                  <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_45%,rgba(155,92,255,.18),transparent_45%)]" />
                  <div className="relative w-16 h-16 rounded-2xl bg-purple-600/15 border border-purple-400/25 flex items-center justify-center group-hover:scale-105 transition-transform">
                    <PlayCircle className="w-8 h-8 text-purple-300" />
                  </div>
                  <span className="absolute bottom-3 right-3 text-[11px] text-zinc-400 bg-black/55 border border-white/10 rounded-lg px-2 py-1 backdrop-blur">{item.embedUrl ? 'پخش داخل سایت' : 'ویدیو به‌زودی'}</span>
                </div>
                <div className="p-5 text-right">
                  <div className="flex items-center gap-2 justify-end text-purple-300"><Icon className="w-4 h-4" /><span className="text-xs font-bold">{item.platform}</span></div>
                  <h2 className="mt-2 text-lg font-black text-white">{item.title}</h2>
                  <p className="mt-2 text-xs text-zinc-500 leading-7">{item.description}</p>
                  {item.aparatUrl && <a href={item.aparatUrl} target="_blank" rel="noreferrer" className="mt-4 inline-flex items-center gap-2 text-xs font-bold text-purple-300 hover:text-white">مشاهده مستقیم در آپارات <ExternalLink className="w-3.5 h-3.5" /></a>}
                </div>
              </motion.article>
            );
          })}
        </div>

        <div className="mt-8 rounded-3xl border border-purple-500/15 bg-[#0c0910] p-5 sm:p-7 flex flex-col sm:flex-row items-center justify-between gap-5 text-right">
          <div className="flex-1">
            <div className="text-base font-black text-white">اگر در اتصال مشکل داشتی، مستقیم پیام بده</div>
            <div className="mt-1 text-xs text-zinc-500">پشتیبانی ZaccShop: <span className="text-purple-300 font-bold">@zana_lm</span></div>
          </div>
          <a href="https://t.me/zana_lm" target="_blank" rel="noreferrer" className="shrink-0 px-5 py-3 rounded-xl bg-purple-600 hover:bg-purple-500 text-white text-sm font-bold flex items-center gap-2 transition-all active:scale-95">
            <Send className="w-4 h-4" /> پیام در تلگرام <ExternalLink className="w-3.5 h-3.5" />
          </a>
        </div>
      </div>
    </section>
  );
};
