'use client';

import { useState } from 'react';
import { ChevronUp, ChevronDown } from 'lucide-react';
import type { Vault, AttentionAlert } from '@/lib/types';
import { HealthDots } from './health-dots';
import { AttentionAlertRow } from './attention-alert';

interface VaultOverviewPanelProps {
  vault: Vault;
  alerts?: AttentionAlert[];
}

export function VaultOverviewPanel({ vault, alerts = [] }: VaultOverviewPanelProps) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="rounded-lg border border-border bg-surface p-4 mb-4">
      {collapsed ? (
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-surface-elevated flex items-center justify-center text-lg font-bold text-accent">
              {vault.name.charAt(0)}
            </div>
            <span className="text-sm font-medium text-text-primary">{vault.name}</span>
            <span className="text-text-muted">&middot;</span>
            <HealthDots health={vault.health} />
          </div>
          <button
            onClick={() => setCollapsed(false)}
            className="p-1 rounded-md hover:bg-surface-elevated text-text-muted hover:text-text-primary transition-colors"
            aria-label="Expand overview"
          >
            <ChevronDown size={16} />
          </button>
        </div>
      ) : (
        <>
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-lg bg-surface-elevated flex items-center justify-center text-xl font-bold text-accent">
                {vault.name.charAt(0)}
              </div>
              <div>
                <h2 className="text-base font-semibold text-text-primary">{vault.name}</h2>
                <p className="text-sm text-text-secondary">{vault.description}</p>
              </div>
            </div>
            <button
              onClick={() => setCollapsed(true)}
              className="p-1 rounded-md hover:bg-surface-elevated text-text-muted hover:text-text-primary transition-colors"
              aria-label="Collapse overview"
            >
              <ChevronUp size={16} />
            </button>
          </div>

          {/* Three stat cards */}
          <div className="grid grid-cols-3 gap-3 mb-3">
            <div className="text-center p-3 rounded-lg bg-surface-elevated border border-border-light">
              <div className="text-2xl font-bold text-memory">{vault.memoryCount}</div>
              <div className="text-xs text-text-muted mt-0.5">Memories</div>
            </div>
            <div className="text-center p-3 rounded-lg bg-surface-elevated border border-border-light">
              <div className="text-2xl font-bold text-document">{vault.documentCount}</div>
              <div className="text-xs text-text-muted mt-0.5">Knowledge</div>
            </div>
            <div className="text-center p-3 rounded-lg bg-surface-elevated border border-border-light">
              <div className="text-2xl font-bold text-skill">{vault.skillCount}</div>
              <div className="text-xs text-text-muted mt-0.5">Skills</div>
            </div>
          </div>

          {/* Health */}
          <div className="flex items-center gap-2 text-sm mb-3">
            <span className="text-text-secondary">Health:</span>
            <HealthDots health={vault.health} />
            {vault.fadingCount > 0 && (
              <>
                <span className="text-text-muted">&middot;</span>
                <span className="text-memory text-xs">{vault.fadingCount} fading</span>
              </>
            )}
          </div>

          {/* Needs attention */}
          {alerts.length > 0 && (
            <div>
              <h3 className="text-xs uppercase tracking-wider text-text-muted font-medium mb-2">
                Needs Attention
              </h3>
              <div className="space-y-2">
                {alerts.map((alert) => (
                  <AttentionAlertRow key={alert.id} alert={alert} />
                ))}
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}