'use client';

import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { Sunrise, Sun, CloudSun, Sunset, Moon, MapPin, Quote, Newspaper } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { useAuthStore } from '@/stores/auth-store';
import { dashboardApi } from '@/services/api/dashboard';
import type { PrayerTimes } from '@/types';

const stagger = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.06 } },
};
const item = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0 } };

const PRAYER_LABELS: { key: keyof PrayerTimes; label: string; icon: typeof Sunrise }[] = [
  { key: 'fajr', label: 'Subuh', icon: Sunrise },
  { key: 'dhuhr', label: 'Dzuhur', icon: Sun },
  { key: 'asr', label: 'Ashar', icon: CloudSun },
  { key: 'maghrib', label: 'Maghrib', icon: Sunset },
  { key: 'isha', label: 'Isya', icon: Moon },
];

function getGreeting() {
  const hour = new Date().getHours();
  if (hour < 10) return 'Selamat Pagi';
  if (hour < 15) return 'Selamat Siang';
  if (hour < 18) return 'Selamat Sore';
  return 'Selamat Malam';
}

export function DashboardContent() {
  const { user } = useAuthStore();
  const { data, isLoading } = useQuery({
    queryKey: ['dashboard'],
    queryFn: () => dashboardApi.getDashboard(),
  });

  return (
    <>
      <title>Dashboard | Nadhom Smart</title>
      <motion.div variants={stagger} initial="hidden" animate="show" className="space-y-6">
        <motion.div variants={item}>
          <h2 className="font-heading text-xl font-bold">
            {getGreeting()}, {user?.fullName || 'Sahabat'} 👋
          </h2>
          <p className="text-sm text-muted-foreground mt-0.5">
            Semoga harimu penuh berkah.
          </p>
        </motion.div>

        {/* Prayer Times */}
        <motion.div variants={item}>
          <Card className="border-border/50">
            <CardContent className="p-4">
              {isLoading ? (
                <Skeleton className="h-24 w-full" />
              ) : data?.prayer ? (
                <>
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-heading text-sm font-semibold">Jadwal Sholat</h3>
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <MapPin className="h-3 w-3" />
                      {data.prayer.location}
                    </div>
                  </div>
                  <div className="grid grid-cols-5 gap-2">
                    {PRAYER_LABELS.map(({ key, label, icon: Icon }) => (
                      <div
                        key={key}
                        className="flex flex-col items-center gap-1 rounded-xl bg-primary/5 px-1 py-2.5"
                      >
                        <Icon className="h-4 w-4 text-primary" />
                        <span className="text-[10px] text-muted-foreground">{label}</span>
                        <span className="text-xs font-semibold">{data.prayer.times[key]}</span>
                      </div>
                    ))}
                  </div>
                </>
              ) : (
                <p className="text-sm text-muted-foreground text-center py-4">
                  Jadwal sholat tidak tersedia.
                </p>
              )}
            </CardContent>
          </Card>
        </motion.div>

        {/* Hikmah */}
        <motion.div variants={item}>
          {isLoading ? (
            <Skeleton className="h-20 w-full rounded-xl" />
          ) : data?.hikmah ? (
            <Card className="border-border/50 bg-secondary/5">
              <CardContent className="p-4">
                <div className="flex gap-3">
                  <Quote className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm italic leading-relaxed">&ldquo;{data.hikmah.content}&rdquo;</p>
                    <p className="text-xs text-muted-foreground mt-2">— {data.hikmah.source}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ) : null}
        </motion.div>

        {/* Articles */}
        <motion.div variants={item}>
          <div className="flex items-center gap-2 mb-3">
            <Newspaper className="h-4 w-4 text-muted-foreground" />
            <h3 className="font-heading text-sm font-semibold">Artikel</h3>
          </div>
          {isLoading ? (
            <div className="space-y-2">
              <Skeleton className="h-20 w-full rounded-xl" />
              <Skeleton className="h-20 w-full rounded-xl" />
            </div>
          ) : data?.articles?.length ? (
            <div className="space-y-2">
              {data.articles.map((article) => (
                <a
                  key={article.url}
                  href={article.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="block"
                >
                  <Card className="border-border/50 hover:border-primary/30 transition-colors">
                    <CardContent className="flex gap-3 p-3">
                      {article.thumbnail && (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={article.thumbnail}
                          alt={article.title}
                          className="h-16 w-16 rounded-lg object-cover shrink-0"
                        />
                      )}
                      <div className="min-w-0 flex-1">
                        <p className="text-sm font-medium line-clamp-2">{article.title}</p>
                        <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
                          {article.summary}
                        </p>
                        <p className="text-[10px] text-muted-foreground mt-1">{article.source}</p>
                      </div>
                    </CardContent>
                  </Card>
                </a>
              ))}
            </div>
          ) : (
            <Card className="border-border/50">
              <CardContent className="p-6 text-center">
                <p className="text-sm text-muted-foreground">Belum ada artikel.</p>
              </CardContent>
            </Card>
          )}
        </motion.div>
      </motion.div>
    </>
  );
}