import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import * as icon from '@mdi/js';
import BaseButton from '../components/BaseButton';
import BaseIcon from '../components/BaseIcon';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import { getPexelsImage } from '../helpers/pexels';

export default function Home() {
    const [illustrationImage, setIllustrationImage] = useState<any>(null);
    const textColor = useAppSelector((state) => state.style.linkColor);
    const title = 'Sistem Sekolah Indonesia';

    useEffect(() => {
        async function fetchData() {
            const image = await getPexelsImage('school building');
            setIllustrationImage(image);
        }
        fetchData();
    }, []);

    const roles = [
        {
            title: 'Admin Yayasan',
            description: 'Kelola data sekolah, jenjang pendidikan, dan setting biaya SPP.',
            icon: icon.mdiShieldAccount,
            color: 'text-blue-600',
            bg: 'bg-blue-50',
        },
        {
            title: 'Guru',
            description: 'Input absensi harian, tugas, nilai, dan jadwal pelajaran.',
            icon: icon.mdiAccountTie,
            color: 'text-green-600',
            bg: 'bg-green-50',
        },
        {
            title: 'Siswa',
            description: 'Lihat jadwal, kerjakan tugas, dan ikuti ujian online.',
            icon: icon.mdiAccountSchool,
            color: 'text-purple-600',
            bg: 'bg-purple-50',
        },
        {
            title: 'Orang Tua',
            description: 'Pantau absensi anak, nilai, dan status pembayaran SPP.',
            icon: icon.mdiAccountChild,
            color: 'text-orange-600',
            bg: 'bg-orange-50',
        },
    ];

    return (
        <div className="min-h-screen bg-gray-50">
            <Head>
                <title>{getPageTitle('Beranda')}</title>
            </Head>

            {/* Hero Section */}
            <div className="relative bg-white overflow-hidden">
                <div className="max-w-7xl mx-auto">
                    <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
                        <svg
                            className="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
                            fill="currentColor"
                            viewBox="0 0 100 100"
                            preserveAspectRatio="none"
                            aria-hidden="true"
                        >
                            <polygon points="50,0 100,0 50,100 0,100" />
                        </svg>

                        <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
                            <div className="sm:text-center lg:text-left">
                                <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
                                    <span className="block xl:inline">Sistem Informasi</span>{' '}
                                    <span className="block text-blue-600 xl:inline">Sekolah Indonesia</span>
                                </h1>
                                <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                                    Solusi digital terintegrasi untuk manajemen akademik, keuangan (SPP), 
                                    absensi real-time, dan komunikasi sekolah yang modern.
                                </p>
                                <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
                                    <div className="rounded-md shadow">
                                        <BaseButton
                                            href="/login"
                                            label="Masuk ke Sistem"
                                            color="info"
                                            className="w-full flex items-center justify-center px-8 py-3 md:py-4 md:text-lg md:px-10"
                                        />
                                    </div>
                                    <div className="mt-3 sm:mt-0 sm:ml-3">
                                        <BaseButton
                                            href="/register"
                                            label="Daftar Sekolah"
                                            color="white"
                                            className="w-full flex items-center justify-center px-8 py-3 md:py-4 md:text-lg md:px-10"
                                        />
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>
                <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
                    {illustrationImage ? (
                        <img
                            className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
                            src={illustrationImage?.src?.large2x || illustrationImage?.src?.original}
                            alt="School"
                        />
                    ) : (
                        <div className="h-56 w-full bg-blue-100 sm:h-72 md:h-96 lg:w-full lg:h-full flex items-center justify-center">
                            <BaseIcon path={icon.mdiSchool} size={120} className="text-blue-300" />
                        </div>
                    )}
                </div>
            </div>

            {/* Features Section */}
            <div className="py-12 bg-gray-50">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="lg:text-center">
                        <h2 className="text-base text-blue-600 font-semibold tracking-wide uppercase">Fitur Utama</h2>
                        <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                            Satu Platform untuk Semua Kebutuhan
                        </p>
                    </div>

                    <div className="mt-10">
                        <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
                            {roles.map((role) => (
                                <div key={role.title} className="relative bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
                                    <dt>
                                        <div className={`absolute flex items-center justify-center h-12 w-12 rounded-md ${role.bg} ${role.color}`}>
                                            <BaseIcon path={role.icon} size={24} />
                                        </div>
                                        <p className="ml-16 text-lg leading-6 font-medium text-gray-900">{role.title}</p>
                                    </dt>
                                    <dd className="mt-2 ml-16 text-base text-gray-500">
                                        {role.description}
                                    </dd>
                                </div>
                            ))}
                        </dl>
                    </div>
                </div>
            </div>

            {/* Stats Section */}
            <div className="bg-blue-700 py-12">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 text-center">
                        <div>
                            <p className="text-5xl font-extrabold text-white">100%</p>
                            <p className="mt-2 text-xl font-medium text-blue-100">Transparan</p>
                        </div>
                        <div>
                            <p className="text-5xl font-extrabold text-white">Real-time</p>
                            <p className="mt-2 text-xl font-medium text-blue-100">Absensi & Nilai</p>
                        </div>
                        <div>
                            <p className="text-5xl font-extrabold text-white">Mudah</p>
                            <p className="mt-2 text-xl font-medium text-blue-100">Pembayaran SPP</p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Footer */}
            <footer className="bg-white">
                <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-100">
                    <div className="flex flex-col md:flex-row justify-between items-center">
                        <p className="text-base text-gray-400">&copy; 2026 {title}. Hak Cipta Dilindungi.</p>
                        <div className="flex space-x-6 mt-4 md:mt-0">
                            <Link href="/privacy-policy" className="text-gray-400 hover:text-gray-500">
                                Kebijakan Privasi
                            </Link>
                            <Link href="/terms-of-use" className="text-gray-400 hover:text-gray-500">
                                Syarat & Ketentuan
                            </Link>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}

Home.getLayout = function getLayout(page: ReactElement) {
    return <LayoutGuest>{page}</LayoutGuest>;
};