"use client";

import { useState, useMemo } from "react";
import { clsx } from "clsx";
import { LayoutGrid, List, ChevronDown, AlertTriangle, ArrowRight, FileText, Zap, Circle } from "lucide-react";
import { useVaults } from "@/lib/use-data";
import { VaultCard } from "@/components/vault-card";
import { HealthDots } from "@/components/health-dots";
import Link from "next/link";
import type { Vault } from "@/lib/types";
import { encodeVaultSlug } from "@/lib/types";

type FilterOption = "all" | "alerts";
type SortOption = "activity" | "name" | "health" | "memories";
type ViewMode = "grid" | "list";

const filterLabels: Record<FilterOption, string> = {
  all: "All",
  alerts: "With Alerts",
};

const sortLabels: Record<SortOption, string> = {
  activity: "Activity",
  name: "Name",
  health: "Health",
  memories: "Memory Count",
};

function filterVaults(vaults: Vault[], filter: FilterOption): Vault[] {
  switch (filter) {
    case "alerts":
      return vaults.filter((v) => v.fadingCount > 0);
    default:
      return vaults;
  }
}

function sortVaults(vaults: Vault[], sort: SortOption): Vault[] {
  const sorted = [...vaults];
  switch (sort) {
    case "name":
      return sorted.sort((a, b) => a.name.localeCompare(b.name));
    case "health":
      return sorted.sort((a, b) => b.health - a.health);
    case "memories":
      return sorted.sort((a, b) => b.memoryCount - a.memoryCount);
    case "activity":
    default:
      return sorted.sort(
        (a, b) => new Date(b.lastActiveAt).getTime() - new Date(a.lastActiveAt).getTime()
      );
  }
}

function VaultListRow({ vault }: { vault: Vault }) {
  const hasAlerts = vault.fadingCount > 0;
  const alertText = `${vault.fadingCount} fading`;
  const slug = encodeVaultSlug(vault.owner, vault.name);

  const initials = vault.name
    .split(/[\s\-_]/)
    .map((w) => w[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <Link
      href={`/vaults/${slug}`}
      className="flex items-center gap-4 px-4 py-3 hover:bg-surface-elevated transition-colors"
    >
      <div className="relative">
        <div className="w-8 h-8 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-xs font-semibold text-text-primary">
          {initials}
        </div>
      </div>
      <div className="flex-1 min-w-0">
        <span className="text-sm font-medium text-text-primary">{vault.name}</span>
      </div>
      <span className="flex items-center gap-1 text-xs text-text-secondary w-24 text-right">
        <Circle size={10} className="text-memory" />
        {vault.memoryCount}
      </span>
      <span className="flex items-center gap-1 text-xs text-text-secondary w-20 text-right">
        <FileText size={10} className="text-document" />
        {vault.documentCount}
      </span>
      <span className="flex items-center gap-1 text-xs text-text-secondary w-20 text-right">
        <Zap size={10} className="text-skill" />
        {vault.skillCount}
      </span>
      <div className="w-20 flex justify-center">
        <HealthDots health={vault.health} />
      </div>
      <div className="w-24 text-right">
        {hasAlerts ? (
          <span className="flex items-center justify-end gap-1 text-xs text-warning">
            <AlertTriangle size={12} />
            {alertText}
          </span>
        ) : (
          <span className="text-xs text-text-muted">--</span>
        )}
      </div>
    </Link>
  );
}

export default function VaultsPage() {
  const { vaults: rawVaults, loading } = useVaults();
  const [filter, setFilter] = useState<FilterOption>("all");
  const [sort, setSort] = useState<SortOption>("activity");
  const [viewMode, setViewMode] = useState<ViewMode>("grid");
  const [filterOpen, setFilterOpen] = useState(false);
  const [sortOpen, setSortOpen] = useState(false);

  const vaults = useMemo(() => {
    const filtered = filterVaults(rawVaults, filter);
    return sortVaults(filtered, sort);
  }, [rawVaults, filter, sort]);

  return (
    <div className="p-8 max-w-[1400px]">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-semibold text-text-primary">My Vaults</h1>
      </div>

      {/* Filter Bar */}
      <div className="flex items-center gap-3 mb-6">
        {/* Filter dropdown */}
        <div className="relative">
          <button
            onClick={() => { setFilterOpen(!filterOpen); setSortOpen(false); }}
            className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border text-sm text-text-secondary hover:text-text-primary hover:border-text-muted transition-colors"
          >
            {filterLabels[filter]}
            <ChevronDown size={14} />
          </button>
          {filterOpen && (
            <div className="absolute top-full mt-1 left-0 w-40 bg-surface-elevated border border-border rounded-lg shadow-xl shadow-black/30 z-10 py-1">
              {(Object.keys(filterLabels) as FilterOption[]).map((key) => (
                <button
                  key={key}
                  onClick={() => { setFilter(key); setFilterOpen(false); }}
                  className={clsx(
                    "w-full text-left px-3 py-1.5 text-sm transition-colors",
                    filter === key
                      ? "text-text-primary bg-surface"
                      : "text-text-secondary hover:text-text-primary hover:bg-surface"
                  )}
                >
                  {filterLabels[key]}
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Sort dropdown */}
        <div className="relative">
          <button
            onClick={() => { setSortOpen(!sortOpen); setFilterOpen(false); }}
            className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border text-sm text-text-secondary hover:text-text-primary hover:border-text-muted transition-colors"
          >
            Sort: {sortLabels[sort]}
            <ChevronDown size={14} />
          </button>
          {sortOpen && (
            <div className="absolute top-full mt-1 left-0 w-40 bg-surface-elevated border border-border rounded-lg shadow-xl shadow-black/30 z-10 py-1">
              {(Object.keys(sortLabels) as SortOption[]).map((key) => (
                <button
                  key={key}
                  onClick={() => { setSort(key); setSortOpen(false); }}
                  className={clsx(
                    "w-full text-left px-3 py-1.5 text-sm transition-colors",
                    sort === key
                      ? "text-text-primary bg-surface"
                      : "text-text-secondary hover:text-text-primary hover:bg-surface"
                  )}
                >
                  {sortLabels[key]}
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Spacer */}
        <div className="flex-1" />

        {/* View toggle */}
        <div className="flex items-center gap-1 bg-surface rounded-lg border border-border-light p-0.5">
          <button
            onClick={() => setViewMode("grid")}
            className={clsx(
              "p-1.5 rounded-md transition-colors",
              viewMode === "grid"
                ? "bg-surface-elevated text-text-primary"
                : "text-text-muted hover:text-text-primary"
            )}
          >
            <LayoutGrid size={16} />
          </button>
          <button
            onClick={() => setViewMode("list")}
            className={clsx(
              "p-1.5 rounded-md transition-colors",
              viewMode === "list"
                ? "bg-surface-elevated text-text-primary"
                : "text-text-muted hover:text-text-primary"
            )}
          >
            <List size={16} />
          </button>
        </div>
      </div>

      {/* Vault Grid / List */}
      {loading ? (
        <div className="text-text-secondary text-sm py-8 text-center">Loading vaults...</div>
      ) : vaults.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-20 text-center">
          <p className="text-text-secondary mb-4">No vaults match your filters.</p>
          <button
            onClick={() => setFilter("all")}
            className="text-sm text-accent hover:text-accent-hover transition-colors"
          >
            Clear filters
          </button>
        </div>
      ) : viewMode === "grid" ? (
        <div className="grid grid-cols-3 gap-4">
          {vaults.map((vault) => (
            <VaultCard key={vault.id} vault={vault} />
          ))}
        </div>
      ) : (
        <div className="rounded-xl bg-surface border border-border-light divide-y divide-border-light overflow-hidden">
          {/* List header */}
          <div className="flex items-center gap-4 px-4 py-2 text-[11px] uppercase tracking-wider text-text-muted font-medium">
            <div className="w-8" />
            <div className="flex-1">Name</div>
            <div className="w-24 text-right">Memories</div>
            <div className="w-20 text-right">Docs</div>
            <div className="w-20 text-right">Skills</div>
            <div className="w-20 text-center">Health</div>
            <div className="w-24 text-right">Alerts</div>
          </div>
          {vaults.map((vault) => (
            <VaultListRow key={vault.id} vault={vault} />
          ))}
        </div>
      )}
    </div>
  );
}