/**
 * Start page — shown after login.
 * 2-column layout: left menu, right grid with workspace tiles.
 */

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '@/store/authStore';
import { useUIStore } from '@/store/uiStore';
import { Settings, HelpCircle, LayoutGrid, ArrowRight, Plus } from 'lucide-react';

// Workspace tile definition
interface WorkspaceTile {
  id: string;
  name: string;
  description: string;
  icon: React.ReactNode;
  color: string;
  path: string;
}

const DEFAULT_WORKSPACES: WorkspaceTile[] = [
  {
    id: 'main',
    name: 'Haupt-Workspace',
    description: 'Kontakte, Kalender, Mail und mehr',
    icon: <LayoutGrid className="w-8 h-8" strokeWidth={1.5} />,
    color: 'from-blue-500 to-blue-600',
    path: '/dashboard',
  },
];

export function StartPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const user = useAuthStore((state) => state.user);
  const sidebarOpen = useUIStore((state) => state.sidebarOpen);

  const menuItems = [
    { id: 'workspaces', label: 'Workspaces', icon: <LayoutGrid className="w-4 h-4" />, active: true },
    { id: 'settings', label: 'Einstellungen', icon: <Settings className="w-4 h-4" />, onClick: () => navigate('/settings') },
    { id: 'help', label: 'Hilfe', icon: <HelpCircle className="w-4 h-4" />, onClick: () => navigate('/help/welcome') },
  ];

  return (
    <div className="flex h-full overflow-hidden bg-secondary-50">
      {/* Left column — menu (toggleable via hamburger) */}
      <aside className={`${sidebarOpen ? 'w-56' : 'w-0'} bg-white border-r border-secondary-200 flex flex-col flex-shrink-0 transition-all duration-200 overflow-hidden`}>
        <div className="h-[58px] flex items-center px-4 border-b border-secondary-200 w-56 flex-shrink-0">
          <span className="text-xl font-bold text-secondary-900">leocrm</span>
        </div>
        <nav className="flex-1 overflow-y-auto py-4 w-56 flex-shrink-0">
          <ul className="space-y-1 px-2">
            {menuItems.map((item) => (
              <li key={item.id}>
                <button
                  onClick={item.onClick || (() => {})}
                  className={`
                    w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch
                    transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
                    ${item.active ? 'bg-primary-50 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
                  `}
                >
                  {item.icon}
                  <span>{item.label}</span>
                </button>
              </li>
            ))}
          </ul>
        </nav>
        {/* User info at bottom */}
        <div className="px-4 py-3 border-t border-secondary-200 w-56 flex-shrink-0">
          <p className="text-xs text-secondary-500 truncate">{user?.email}</p>
        </div>
      </aside>

      {/* Right column — workspace grid */}
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-5xl mx-auto p-8">
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-secondary-900">Willkommen{user?.first_name ? `, ${user.first_name}` : ''}!</h1>
            <p className="text-sm text-secondary-500 mt-1">Wähle einen Workspace aus</p>
          </div>

          {/* Masonry-style grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {DEFAULT_WORKSPACES.map((ws) => (
              <button
                key={ws.id}
                onClick={() => navigate(ws.path)}
                className="
                  group relative overflow-hidden rounded-xl border border-secondary-200 bg-white
                  hover:border-primary-300 hover:shadow-lg transition-all duration-200
                  focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
                  p-6 text-left
                "
              >
                {/* Gradient icon area */}
                <div className={`
                  inline-flex items-center justify-center w-16 h-16 rounded-xl
                  bg-gradient-to-br ${ws.color} text-white mb-4
                  group-hover:scale-110 transition-transform duration-200
                `}>
                  {ws.icon}
                </div>
                <h3 className="text-base font-semibold text-secondary-900 group-hover:text-primary-700 transition-colors">
                  {ws.name}
                </h3>
                <p className="text-sm text-secondary-500 mt-1">{ws.description}</p>
                <div className="
                  mt-4 inline-flex items-center gap-1 text-xs font-medium text-primary-600
                  opacity-0 group-hover:opacity-100 transition-opacity
                ">
                  Öffnen
                  <ArrowRight className="w-3.5 h-3.5" />
                </div>
              </button>
            ))}

            {/* Add workspace placeholder */}
            <button
              className="
                group flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-secondary-200
                hover:border-primary-300 hover:bg-primary-50/30 transition-all duration-200
                p-6 min-h-[180px]
              "
            >
              <Plus className="w-8 h-8 text-secondary-300 group-hover:text-primary-400 transition-colors" />
              <span className="text-sm text-secondary-400 group-hover:text-primary-600 mt-2 transition-colors">
                Workspace hinzufügen
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}