'use client';

import { useRouter } from 'next/navigation';
import './AppLauncher.css';

interface AppCard {
  id: string;
  title: string;
  description: string;
  icon: string;
  color: string;
  href: string;
  gradient: string;
}

const adminCard: AppCard = {
  id: 'user-role-management',
  title: 'User & Role Management',
  description: 'Create users, create roles, and assign roles to users (Admin / Super Admin)',
  icon: '👤',
  color: '#7c3aed',
  gradient: 'linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%)',
  href: '/workstation/administrator',
};

const appCards: AppCard[] = [
  {
    id: 'workstations',
    title: 'Workstations',
    description: 'Access role-based workstations: Admin, Cashier, GIS, Indexing, Archiving',
    icon: '🖥️',
    color: '#6366f1',
    gradient: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
    href: '/workstation'
  },
  {
    id: 'property-search',
    title: 'Property Search',
    description: 'Search and find landed properties by number, UPIN, location, or owner',
    icon: '🔍',
    color: '#10b981',
    gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
    href: '/dashboard?section=property'
  },
  {
    id: 'property-index',
    title: 'Index Property',
    description: 'Create and register new landed property records in the system',
    icon: '🏠',
    color: '#0ea5e9',
    gradient: 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)',
    href: '/property/index'
  },
  {
    id: 'boundary-search',
    title: 'Boundary Search',
    description: 'Search boundaries, disputes, surveys, and treaties',
    icon: '🗺️',
    color: '#f97316',
    gradient: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)',
    href: '/dashboard?section=boundary'
  },
  {
    id: 'boundary-index',
    title: 'Index Boundary Document',
    description: 'Upload and index boundary-related documents, maps, and evidence',
    icon: '📄',
    color: '#ec4899',
    gradient: 'linear-gradient(135deg, #ec4899 0%, #db2777 100%)',
    href: '/boundary/documents/upload'
  },
  {
    id: 'document-search',
    title: 'Document Search',
    description: 'Search documents by number, type, date, or transaction',
    icon: '📋',
    color: '#8b5cf6',
    gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
    href: '/dashboard?section=document'
  },
  {
    id: 'transaction-search',
    title: 'Transaction Search',
    description: 'Find transactions by number, type, status, or date',
    icon: '📊',
    color: '#14b8a6',
    gradient: 'linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)',
    href: '/dashboard?section=transaction'
  },
  {
    id: 'party-search',
    title: 'Party Search',
    description: 'Search for individuals, organizations, and parties',
    icon: '👥',
    color: '#f59e0b',
    gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
    href: '/dashboard?section=party'
  }
];

interface AppLauncherProps {
  showAdminCard?: boolean;
}

export default function AppLauncher({ showAdminCard = false }: AppLauncherProps) {
  const router = useRouter();
  const cards = showAdminCard ? [adminCard, ...appCards] : appCards;

  const handleCardClick = (href: string) => {
    if (href.startsWith('/dashboard')) {
      // Extract section from query string
      const url = new URL(href, window.location.origin);
      const section = url.searchParams.get('section');
      if (section) {
        router.push(`/dashboard?section=${section}`);
      } else {
        router.push(href);
      }
    } else {
      router.push(href);
    }
  };

  return (
    <div className="app-launcher-container">
      <div className="app-launcher-header">
        <h2 className="app-launcher-title">Quick Access</h2>
        <p className="app-launcher-subtitle">Select an application to get started</p>
      </div>
      
      <div className="app-launcher-grid">
        {cards.map((app) => (
          <div
            key={app.id}
            className="app-card"
            onClick={() => handleCardClick(app.href)}
            style={{
              '--card-color': app.color,
              '--card-gradient': app.gradient,
            } as React.CSSProperties}
          >
            <div className="app-card-icon" style={{ background: app.gradient }}>
              <span className="app-icon-emoji">{app.icon}</span>
            </div>
            <div className="app-card-content">
              <h3 className="app-card-title">{app.title}</h3>
              <p className="app-card-description">{app.description}</p>
            </div>
            <div className="app-card-arrow">
              →
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}