import { AlertCircle, Bell, CalendarDays, CheckCircle2, Clock3, RefreshCcw, Sparkles } from 'lucide-react';
import { useEffect, useState } from 'react';
import api from '../services/api';
import { formatJalaliDate } from '../utils/date';
import PwaNotificationItem from './PwaNotificationItem';
import PwaStatCard from './PwaStatCard';
import PwaTaskCard from './PwaTaskCard';

export default function PwaHome() {
  const [home, setHome] = useState(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState('');

  const fetchHome = async (silent = false) => {
    if (silent) setRefreshing(true);
    else setLoading(true);
    setError('');
    try {
      const { data } = await api.get('/pwa/home');
      setHome(data.data);
    } catch (err) {
      setError(err.response?.data?.message || 'خطا در دریافت اطلاعات خانه');
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    fetchHome();
    const refreshAfterTaskCreate = () => fetchHome(true);
    window.addEventListener('pwa:task-created', refreshAfterTaskCreate);
    return () => window.removeEventListener('pwa:task-created', refreshAfterTaskCreate);
  }, []);

  if (loading) return <PwaHomeSkeleton />;

  if (error) {
    return (
      <div className="pwa-state-card error">
        <AlertCircle size={28} />
        <strong>{error}</strong>
        <button type="button" onClick={() => fetchHome()}>تلاش دوباره</button>
      </div>
    );
  }

  const stats = home?.stats || {};
  const tasks = home?.tasks || [];
  const notifications = home?.notifications || [];
  const manager = home?.manager_summary;

  return (
    <div className="pwa-home">
      <section className="pwa-hero-card">
        <div>
          <span className="pwa-eyebrow">{formatJalaliDate(new Date())}</span>
          <h1>سلام، {home?.user?.name || 'همراه عزیز'}</h1>
          <p>امروز چه کارهایی مهم است؟</p>
        </div>
        {home?.user?.role_label && <span className="pwa-role-pill">{home.user.role_label}</span>}
      </section>

      <div className="pwa-section-head">
        <div>
          <h2>نمای امروز</h2>
          <span>خلاصه کارهای مهم شما</span>
        </div>
        <button type="button" onClick={() => fetchHome(true)} disabled={refreshing}>
          <RefreshCcw size={16} />
          {refreshing ? 'در حال بروزرسانی' : 'بروزرسانی'}
        </button>
      </div>

      <section className="pwa-stat-grid">
        <PwaStatCard label="تسک‌های امروز" value={stats.today_tasks} icon={CalendarDays} tone="today" />
        <PwaStatCard label="عقب‌افتاده" value={stats.overdue_tasks} icon={Clock3} tone="danger" />
        <PwaStatCard label="در حال انجام" value={stats.active_tasks} icon={CheckCircle2} tone="active" />
        <PwaStatCard label="اعلان جدید" value={stats.unread_notifications} icon={Bell} tone="notice" />
      </section>

      <section className="pwa-card-section">
        <div className="pwa-section-title">
          <h2>تسک‌های مهم من</h2>
          <span>{tasks.length} مورد</span>
        </div>
        {tasks.length ? (
          <div className="pwa-task-list">
            {tasks.map((task) => <PwaTaskCard key={task.id} task={task} />)}
          </div>
        ) : (
          <div className="pwa-empty-card">
            <Sparkles size={26} />
            <strong>برای امروز تسکی نداری.</strong>
            <span>اگر کاری اضافه شود همین‌جا نمایش داده می‌شود.</span>
          </div>
        )}
      </section>

      {manager && (
        <section className="pwa-manager-card">
          <div className="pwa-section-title">
            <h2>نگاه مدیریتی</h2>
            <span>بر اساس دسترسی شما</span>
          </div>
          <div className="pwa-manager-grid">
            <PwaStatCard label="عقب‌افتاده تیم" value={manager.overdue_team_tasks} tone="danger" />
            <PwaStatCard label="در انتظار بررسی" value={manager.review_tasks} tone="notice" />
            <PwaStatCard label="اعضای دارای تأخیر" value={manager.delayed_members} tone="active" />
          </div>
          <div className="pwa-sprint-line">
            <span>اسپرینت فعال</span>
            <strong>{manager.active_sprint?.title || 'اسپرینت فعالی ثبت نشده است'}</strong>
          </div>
        </section>
      )}

      <section className="pwa-card-section">
        <div className="pwa-section-title">
          <h2>اعلان‌های اخیر</h2>
          <span>{notifications.length} مورد</span>
        </div>
        {notifications.length ? (
          <div className="pwa-notification-list">
            {notifications.map((notification) => <PwaNotificationItem key={notification.id} notification={notification} />)}
          </div>
        ) : (
          <div className="pwa-empty-card">
            <Bell size={25} />
            <strong>اعلان جدیدی وجود ندارد.</strong>
            <span>وقتی رویداد تازه‌ای داشته باشید اینجا می‌بینید.</span>
          </div>
        )}
      </section>
    </div>
  );
}

function PwaHomeSkeleton() {
  return (
    <div className="pwa-home">
      <div className="pwa-skeleton hero" />
      <div className="pwa-stat-grid">
        {[1, 2, 3, 4].map((item) => <div className="pwa-skeleton stat" key={item} />)}
      </div>
      {[1, 2, 3].map((item) => <div className="pwa-skeleton row" key={item} />)}
    </div>
  );
}
