"use client";

import { useMemo } from "react";
import Link from "next/link";
import { clsx } from "clsx";
import { AlertTriangle, ArrowRight, Lock, Globe } from "lucide-react";
import { useVaults, useActivityEvents } from "@/lib/use-data";
import type { AttentionAlert } from "@/lib/types";
import { encodeVaultSlug } from "@/lib/types";
import { VaultCard } from "@/components/vault-card";
import { AttentionAlertRow } from "@/components/attention-alert";
import { ActivityEventRow } from "@/components/activity-event";
import { StatsCard } from "@/components/stats-card";
import { HealthDots } from "@/components/health-dots";

function getGreeting(): string {
  const hour = new Date().getHours();
  if (hour < 12) return "Good morning";
  if (hour < 18) return "Good afternoon";
  return "Good evening";
}


export default function DashboardPage() {
  const { vaults, loading: vaultsLoading } = useVaults();
  const { events: activityEvents, loading: activityLoading } = useActivityEvents();

  // Compute quick stats from vaults
  const totalMemories = vaults.reduce((sum, v) => sum + v.memoryCount, 0);
  const totalDocuments = vaults.reduce((sum, v) => sum + v.documentCount, 0);
  const totalSkills = vaults.reduce((sum, v) => sum + v.skillCount, 0);
  const avgHealth = vaults.length > 0
    ? vaults.reduce((sum, v) => sum + v.health, 0) / vaults.length
    : 0;

  // Derive alerts from vault data
  const alerts = useMemo<AttentionAlert[]>(() => {
    const result: AttentionAlert[] = [];
    for (const vault of vaults) {
      if (vault.fadingCount > 0) {
        const slug = encodeVaultSlug(vault.owner, vault.name);
        result.push({
          id: `fading-${vault.fullName}`,
          severity: "warning",
          message: `${vault.name}: ${vault.fadingCount} fading memor${vault.fadingCount === 1 ? "y" : "ies"} need${vault.fadingCount === 1 ? "s" : ""} review`,
          vaultFullName: vault.fullName,
          actionLabel: "Review",
          actionUrl: `/vaults/${slug}?status=fading`,
        });
      }
    }
    return result;
  }, [vaults]);

  return (
    <div className="p-8 max-w-[1400px]">
      {/* Greeting */}
      <h1 className="text-2xl font-semibold text-text-primary mb-1">
        {getGreeting()}
      </h1>
      <p className="text-sm text-text-secondary mb-8">
        Your memory and knowledge management console.
      </p>

      {/* Attention Panel */}
      {alerts.length > 0 && (
        <section className="mb-8">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <AlertTriangle size={16} className="text-warning" />
              <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wide">
                Attention Needed
              </h2>
              <span className="text-xs text-text-muted bg-surface px-1.5 py-0.5 rounded-full">
                {alerts.length}
              </span>
            </div>
            <Link
              href="/activity"
              className="text-xs text-accent hover:text-accent-hover transition-colors"
            >
              See All
            </Link>
          </div>
          <div className="flex flex-col gap-2">
            {alerts.map((alert) => (
              <AttentionAlertRow key={alert.id} alert={alert} />
            ))}
          </div>
        </section>
      )}

      {/* Two-column layout */}
      <div className="grid grid-cols-[1fr_0.7fr] gap-8">
        {/* Left column */}
        <div className="space-y-8">
          {/* My Vaults (private) */}
          <section>
            <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wide mb-4">
              My Vaults
            </h2>
            <div className="grid grid-cols-2 gap-4">
              {vaultsLoading ? (
                <div className="col-span-2 text-text-secondary text-sm py-4">Loading...</div>
              ) : vaults.filter(v => v.isPrivate).length === 0 ? (
                <div className="col-span-2 text-text-muted text-sm py-4">No private vaults.</div>
              ) : (
                vaults.filter(v => v.isPrivate).map((vault) => (
                  <VaultCard key={vault.id} vault={vault} />
                ))
              )}
            </div>
          </section>

          {/* Shared Vaults (public) */}
          <section>
            <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wide mb-4">
              Shared Vaults
            </h2>
            <div className="grid grid-cols-2 gap-4">
              {vaultsLoading ? (
                <div className="col-span-2 text-text-secondary text-sm py-4">Loading...</div>
              ) : vaults.filter(v => !v.isPrivate).length === 0 ? (
                <div className="col-span-2 text-text-muted text-sm py-4">No shared vaults yet.</div>
              ) : (
                vaults.filter(v => !v.isPrivate).map((vault) => (
                  <VaultCard key={vault.id} vault={vault} />
                ))
              )}
            </div>
          </section>
        </div>

        {/* Right column */}
        <div className="space-y-8">
          {/* Activity Feed */}
          <section>
            <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wide mb-3">
              Recent Activity
            </h2>
            {/* Events */}
            <div className="divide-y divide-border-light">
              {activityLoading ? (
                <p className="text-sm text-text-secondary py-4">Loading activity...</p>
              ) : activityEvents.length === 0 ? (
                <p className="text-sm text-text-muted py-4">No recent activity.</p>
              ) : (
                activityEvents.map((event) => (
                  <ActivityEventRow key={event.id} event={event} />
                ))
              )}
            </div>
          </section>

          {/* Quick Stats */}
          <section>
            <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wide mb-3">
              Quick Stats
            </h2>
            <div className="grid grid-cols-2 gap-3">
              <StatsCard label="Total Memories" value={totalMemories} />
              <StatsCard label="Documents" value={totalDocuments} />
              <StatsCard label="Skills" value={totalSkills} />
              <div className="p-4 rounded-xl bg-surface border border-border-light">
                <div className="flex items-center gap-2 mb-1">
                  <HealthDots health={Math.round(avgHealth)} />
                </div>
                <p className="text-xs text-text-muted mt-2">Avg Health</p>
                <p className="text-lg font-bold text-text-primary">
                  {avgHealth.toFixed(1)}/5
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}