/* eslint-disable */
// Dashboard overview — welcome card, countdown, four stat tiles, calendar, quick stats

const DashboardScreen = ({ onNavigate }) => {
  const activeTasks = Storage.getArray('familyhub_kanban', 'tasks').filter(t => t.column !== 'done').length;
  const giftIdeas = Storage.getArray('familyhub_registry', 'items').filter(g => !g.purchased).length;
  const memoriesCount = Storage.getArray('familyhub_memories', 'memories').length;

  const expenses = Storage.getArray('familyhub_budget', 'expenses');
  const now = new Date();
  const curPrefix = now.getFullYear() + "-" + String(now.getMonth() + 1).padStart(2, "0");
  const monthlySpend = expenses.filter(e => (e.date || "").startsWith(curPrefix)).reduce((s, e) => s + (parseFloat(e.amount) || 0), 0);

  const recurringBills = Storage.getArray('familyhub_budget', 'recurringBills');
  const upcomingCount = recurringBills.filter(b => b.enabled).length;

  const [settings, setSettings] = React.useState(() => Storage.get('familyhub_settings') || {});
  React.useEffect(() => {
    const onSync = () => setSettings(Storage.get('familyhub_settings') || {});
    window.addEventListener('familyhub-synced', onSync);
    return () => window.removeEventListener('familyhub-synced', onSync);
  }, []);

  const countdownLabel = settings.countdownLabel || "Next Family Vacation";
  const countdownDays = settings.countdownDate
    ? Math.max(0, Math.ceil((new Date(settings.countdownDate) - new Date()) / 86400000))
    : null;

  const nav = (view) => onNavigate && onNavigate(view);

  return (
  <section className="p-4 md:p-6 space-y-6">
    <div className="grid md:grid-cols-2 gap-6">
      <Card>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Welcome to The Jagdev Hub</h2>
        <p className="text-gray-600 dark:text-gray-300">
          Use the navigation menu to access all features. Your data is stored privately and synced across approved family members on every device.
        </p>
      </Card>
      <CountdownTimer label={countdownLabel} daysAway={countdownDays} />
    </div>

    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
      <Card className="text-center cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all" onClick={() => nav("kanban")}>
        <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{activeTasks}</div>
        <p className="text-gray-600 dark:text-gray-300 mt-2">Active Tasks</p>
      </Card>
      <Card className="text-center cursor-pointer hover:ring-2 hover:ring-green-400 transition-all" onClick={() => nav("registry")}>
        <div className="text-3xl font-bold text-green-600 dark:text-green-400">{giftIdeas}</div>
        <p className="text-gray-600 dark:text-gray-300 mt-2">Gift Ideas</p>
      </Card>
      <Card className="text-center cursor-pointer hover:ring-2 hover:ring-purple-400 transition-all" onClick={() => nav("memories")}>
        <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">{memoriesCount}</div>
        <p className="text-gray-600 dark:text-gray-300 mt-2">Memories</p>
      </Card>
      <Card className="text-center cursor-pointer hover:ring-2 hover:ring-orange-400 transition-all" onClick={() => nav("budget")}>
        <div className="text-3xl font-bold text-orange-600 dark:text-orange-400">{"$" + monthlySpend.toFixed(2)}</div>
        <p className="text-gray-600 dark:text-gray-300 mt-2">Spent This Month</p>
        {upcomingCount > 0 && <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{upcomingCount} recurring bill{upcomingCount !== 1 ? 's' : ''}</p>}
      </Card>
    </div>

    {/* Calendar + digest side by side */}
    <div className="grid md:grid-cols-2 gap-6">
      <CalendarWidget />
      <Card>
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Quick Stats</h3>
        <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
          <li className="flex items-center gap-2">
            <span className="text-base">📋</span>
            <span><b>{Storage.getArray('familyhub_kanban', 'tasks').filter(t => t.column === 'progress').length}</b> tasks in progress · <b>{Storage.getArray('familyhub_kanban', 'tasks').filter(t => t.column === 'done').length}</b> done</span>
          </li>
          <li className="flex items-center gap-2">
            <span className="text-base">🎁</span>
            <span><b>{giftIdeas}</b> gift ideas still available</span>
          </li>
          <li className="flex items-center gap-2">
            <span className="text-base">📸</span>
            <span><b>{memoriesCount}</b> memories saved</span>
          </li>
          <li className="flex items-center gap-2">
            <span className="text-base">🔒</span>
            <span><b>{Storage.getArray('familyhub_documents', 'documents').length}</b> documents stored</span>
          </li>
        </ul>
      </Card>
    </div>
  </section>
  );
};

window.DashboardScreen = DashboardScreen;