'use client';

/**
 * RightPanel — collapsible right-side panel with tabbed content.
 *
 * Displays three tabs: Notifications, Activities, Contacts.
 * Slides in/out from the right edge with a CSS transform transition (≤300ms).
 * On desktop (≥1024px): fixed panel, 300px wide.
 * On mobile (<1024px): full-height overlay with semi-transparent backdrop.
 *
 * State is managed by useRightPanelStore (Zustand).
 *
 * Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8
 */

import { useRightPanelStore, type RightPanelTab } from '@/lib/stores/right-panel-store';

// ── Placeholder data types ──────────────────────────────────────────────────

interface NotificationItem {
  id: string;
  message: string;
  timestamp: string;
  read: boolean;
}

interface ActivityItem {
  id: string;
  description: string;
  timestamp: string;
  user: string;
}

interface ContactItem {
  id: string;
  name: string;
  status: 'online' | 'offline' | 'away';
  initials: string;
}

// ── Placeholder data ────────────────────────────────────────────────────────

const notifications: NotificationItem[] = [
  { id: '1', message: 'New royalty payment received from Universal Music', timestamp: '2 min ago', read: false },
  { id: '2', message: 'Contract #1042 has been approved', timestamp: '15 min ago', read: false },
  { id: '3', message: 'Monthly income report is ready', timestamp: '1 hour ago', read: true },
  { id: '4', message: 'New composer added to catalog', timestamp: '3 hours ago', read: true },
  { id: '5', message: 'System maintenance scheduled for tonight', timestamp: '5 hours ago', read: true },
];

const activities: ActivityItem[] = [
  { id: '1', description: 'Updated income records for Q4', timestamp: '5 min ago', user: 'Sarah K.' },
  { id: '2', description: 'Approved 3 pending contracts', timestamp: '30 min ago', user: 'Mike R.' },
  { id: '3', description: 'Generated statement for December', timestamp: '2 hours ago', user: 'Anna L.' },
  { id: '4', description: 'Added new work "Symphony No. 5"', timestamp: '4 hours ago', user: 'James P.' },
  { id: '5', description: 'Exported audit log for review', timestamp: '6 hours ago', user: 'Sarah K.' },
];

const contacts: ContactItem[] = [
  { id: '1', name: 'Sarah Kim', status: 'online', initials: 'SK' },
  { id: '2', name: 'Mike Roberts', status: 'online', initials: 'MR' },
  { id: '3', name: 'Anna Lee', status: 'away', initials: 'AL' },
  { id: '4', name: 'James Park', status: 'offline', initials: 'JP' },
  { id: '5', name: 'Emily Chen', status: 'online', initials: 'EC' },
  { id: '6', name: 'David Wilson', status: 'offline', initials: 'DW' },
];

// ── Tab configuration ───────────────────────────────────────────────────────

const tabs: { key: RightPanelTab; label: string }[] = [
  { key: 'notifications', label: 'Notifications' },
  { key: 'activities', label: 'Activities' },
  { key: 'contacts', label: 'Contacts' },
];

// ── Sub-components ──────────────────────────────────────────────────────────

function NotificationsTab() {
  return (
    <div className="flex flex-col gap-1">
      {notifications.map((item) => (
        <div
          key={item.id}
          className={`rounded-lg px-3 py-2.5 transition-colors duration-150 hover:bg-white/5 ${
            !item.read ? 'border-l-2 border-divisi-accent' : ''
          }`}
        >
          <p className={`text-sm leading-snug ${!item.read ? 'text-divisi-text-primary' : 'text-divisi-text-secondary'}`}>
            {item.message}
          </p>
          <span className="text-xs text-divisi-text-secondary mt-1 block">
            {item.timestamp}
          </span>
        </div>
      ))}
    </div>
  );
}

function ActivitiesTab() {
  return (
    <div className="flex flex-col gap-1">
      {activities.map((item) => (
        <div
          key={item.id}
          className="rounded-lg px-3 py-2.5 transition-colors duration-150 hover:bg-white/5"
        >
          <p className="text-sm text-divisi-text-primary leading-snug">
            {item.description}
          </p>
          <div className="flex items-center gap-2 mt-1">
            <span className="text-xs text-divisi-accent font-medium">{item.user}</span>
            <span className="text-xs text-divisi-text-secondary">{item.timestamp}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function ContactsTab() {
  return (
    <div className="flex flex-col gap-1">
      {contacts.map((item) => (
        <div
          key={item.id}
          className="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors duration-150 hover:bg-white/5"
        >
          {/* Avatar */}
          <div className="relative flex-shrink-0">
            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-divisi-accent/15 text-xs font-semibold text-divisi-accent">
              {item.initials}
            </div>
            {/* Status indicator */}
            <span
              className={`absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-divisi-card ${
                item.status === 'online'
                  ? 'bg-green-500'
                  : item.status === 'away'
                    ? 'bg-yellow-500'
                    : 'bg-gray-500'
              }`}
            />
          </div>
          {/* Name and status */}
          <div className="flex-1 min-w-0">
            <p className="text-sm text-divisi-text-primary truncate">{item.name}</p>
            <p className="text-xs text-divisi-text-secondary capitalize">{item.status}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Main component ──────────────────────────────────────────────────────────

export default function RightPanel() {
  const isOpen = useRightPanelStore((s) => s.isOpen);
  const activeTab = useRightPanelStore((s) => s.activeTab);
  const close = useRightPanelStore((s) => s.close);
  const setActiveTab = useRightPanelStore((s) => s.setActiveTab);

  return (
    <>
      {/* Backdrop — visible only on mobile (<1024px) when panel is open */}
      {isOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={close}
          aria-hidden="true"
        />
      )}

      {/* Panel */}
      <aside
        className={`
          fixed top-14 right-0 z-50 h-[calc(100vh-3.5rem)]
          w-[300px] border-l border-divisi-border bg-divisi-card
          flex flex-col
          transition-transform duration-300 ease-in-out
          ${isOpen ? 'translate-x-0' : 'translate-x-full'}
        `}
        aria-label="Right panel"
        aria-hidden={!isOpen}
      >
        {/* Tab headers */}
        <div className="flex border-b border-divisi-border">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              type="button"
              onClick={() => setActiveTab(tab.key)}
              className={`
                flex-1 px-2 py-3 text-xs font-medium transition-colors duration-150
                ${
                  activeTab === tab.key
                    ? 'text-divisi-accent border-b-2 border-divisi-accent'
                    : 'text-divisi-text-secondary hover:text-divisi-text-primary'
                }
              `}
              aria-selected={activeTab === tab.key}
              role="tab"
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab content */}
        <div className="flex-1 overflow-y-auto p-3" role="tabpanel">
          {activeTab === 'notifications' && <NotificationsTab />}
          {activeTab === 'activities' && <ActivitiesTab />}
          {activeTab === 'contacts' && <ContactsTab />}
        </div>

        {/* Close button at bottom */}
        <div className="border-t border-divisi-border p-3">
          <button
            type="button"
            onClick={close}
            className="w-full rounded-lg px-3 py-2 text-sm text-divisi-text-secondary hover:text-divisi-text-primary hover:bg-white/5 transition-colors duration-150"
          >
            Close Panel
          </button>
        </div>
      </aside>
    </>
  );
}