// app/page.tsx
"use client";

import { AlertCircle, AlertTriangle, Info, Loader2, PhoneCall } from 'lucide-react';
import { useEffect, useState } from 'react';
import { readJsonFile } from './actions/jsonEditor';
import { SafePhoneLink } from './components/PhoneLinks';
import { ActionLinkCard } from './components/ui/ActionLinkCard';
import { SectionCard } from './components/ui/SectionCard';

const getNoticeConfig = (type: string) => {
    switch (type) {
        case 'important':
            return { icon: AlertCircle, title: 'Viktigt Meddelande', variant: 'alert' as const };
        case 'notice':
            return { icon: Info, title: 'Information', variant: undefined };
        case 'warning':
        default:
            return { icon: AlertTriangle, title: 'Dagens Påminnelse', variant: 'highlight' as const };
    }
};

export default function Home() {
    const [notice, setNotice] = useState<any>(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const loadNotice = async () => {
            if (navigator.onLine) {
                const res = await readJsonFile('notice.json');
                if (res.success && res.data) {
                    setNotice(res.data);
                    localStorage.setItem('kullaberg_notice_cache', JSON.stringify(res.data));
                }
            } else {
                const cached = localStorage.getItem('kullaberg_notice_cache');
                if (cached) setNotice(JSON.parse(cached));
            }
            setIsLoading(false);
        };
        loadNotice();
    }, []);

    const nConfig = notice ? getNoticeConfig(notice.type) : null;

    return (
        <div className="space-y-6 animate-fade-in w-full mx-auto">
            {/* Welcome Banner */}
            <div className="bg-slate-teal rounded-3xl p-6 shadow-sm text-eggshell">
                <h1 className="text-3xl font-black tracking-tight mb-1">Välkommen!</h1>
                <p className="text-eggshell/90 font-bold">Naturvärdarna på Kullaberg — Sommar {new Date().getFullYear()}</p>
            </div>

            {/* Daily Notice Card */}
            {isLoading ? (
                <div className="flex justify-center py-4"><Loader2 className="animate-spin text-slate-teal" size={24} /></div>
            ) : (
                notice && notice.isActive && nConfig && (
                    <SectionCard
                        title={nConfig.title}
                        icon={nConfig.icon}
                        variant={nConfig.variant}
                        description={notice.message}
                    />
                )
            )}

            {/* Quick Action Cards now use the glass style */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <ActionLinkCard
                    href="/schedule"
                    title="Ditt Schema"
                    description="Kolla dina arbetspass och dagliga rundor snabbt."
                />

                <ActionLinkCard
                    href="/faq"
                    title="Vanliga Frågor"
                    description="Snabba svar på turisternas vanligaste funderingar."
                />
            </div>

            {/* Contact Card updated to 'glass' variant */}
            <SectionCard
                title="Snabbkontakt"
                icon={PhoneCall}
            >
                <div className="space-y-4 pt-2">
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center pb-4 border-b border-white gap-2">
                        <span className="text-sm font-bold text-ebony">William Söderberg</span>
                        <div className='flex gap-2 flex-wrap md:justify-end text-sm'>
                            <SafePhoneLink parts={['072', '247', '02', '91']} display="072-247 02 91" />
                            <SafePhoneLink parts={['078', '389', '355', '81', '0604']} display="078-389 35 58 10 604" />
                        </div>
                    </div>
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
                        <span className="text-sm font-bold text-ebony">Oliver Nilsson</span>
                        <div className='flex gap-2 flex-wrap md:justify-end text-sm'>
                            <SafePhoneLink parts={['072', '717', '74', '40']} display="072-717 74 40" />
                            <SafePhoneLink parts={['078', '389', '355', '81', '0605']} display="078-389 35 58 10 605" />
                        </div>
                    </div>
                </div>
            </SectionCard>
        </div>
    );
}