import React from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { 
  Building2, 
  Building, 
  Stethoscope, 
  Activity, 
  User, 
  Scan, 
  ShoppingCart,
  ArrowRight,
  Shield,
  ExternalLink,
  Plus,
  Truck
} from 'lucide-react';
import './PerspectiveLauncher.css';

interface PortalCardProps {
  title: string;
  subtitle: string;
  icon: React.ElementType;
  color: string;
  path: string;
  description: string;
  delay: number;
}

const PortalCard: React.FC<PortalCardProps> = ({ title, subtitle, icon: Icon, color, path, description, delay }) => {
  const navigate = useNavigate();

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
      whileHover={{ scale: 1.02, y: -5 }}
      onClick={() => navigate(path)}
      className="portal-card"
      style={{ '--accent-color': color } as React.CSSProperties}
    >
      <div className="portal-card-glow" />
      <div className="portal-card-inner">
        <div className="portal-icon-container">
          <Icon size={32} strokeWidth={1.5} />
        </div>
        <div className="portal-content">
          <span className="portal-subtitle">{subtitle}</span>
          <h2 className="portal-title">{title}</h2>
          <p className="portal-description">{description}</p>
        </div>
        <div className="portal-footer">
          <span className="portal-action">Enter Portal <ArrowRight size={16} /></span>
        </div>
      </div>
    </motion.div>
  );
};

export const PerspectiveLauncher: React.FC = () => {
  const portals = [
    {
      title: 'Hospital Admin',
      subtitle: 'FACILITY MANAGEMENT',
      icon: Shield,
      color: '#3b82f6',
      path: '/login/hospital',
      description: 'Full administrative control over facility configuration, department setup, and staff management.'
    },
    {
      title: 'ED Doctor (ERCP)',
      subtitle: 'CLINICAL OPERATIONS',
      icon: Stethoscope,
      color: '#10b981',
      path: '/login/hospital',
      description: 'Manage active patient triage, teleconsultations, and real-time vital monitoring from the mission control.'
    },
    {
      title: 'Hospital Coordinator',
      subtitle: 'PATIENT LOGISTICS',
      icon: Building,
      color: '#8b5cf6',
      path: '/login/hospital',
      description: 'Coordinate with incoming ambulances, manage bed capacity, and oversee patient documentation handovers.'
    }
  ];

  return (
    <div className="launcher-page">
      <div className="launcher-bg">
        <div className="launcher-grid" />
        <div className="launcher-blob blob-1" />
        <div className="launcher-blob blob-2" />
        <div className="launcher-blob blob-3" />
      </div>

      <header className="launcher-header">
        <motion.div 
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="launcher-brand"
        >
          <div className="launcher-logo">
            <Activity className="text-blue-500" />
          </div>
          <div>
            <h1 className="brand-name">TeleEMS <span className="brand-version">v2.4</span></h1>
            <p className="brand-tagline">Integrated Health Ecosystem</p>
          </div>
        </motion.div>

        <div className="launcher-actions">
          <div className="security-status">
            <Shield size={16} />
            <span>Secure Enterprise Node</span>
          </div>
          <button className="config-btn">
            <Plus size={18} /> Add Module
          </button>
        </div>
      </header>

      <main className="launcher-content">
        <div className="launcher-intro">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="launcher-main-title"
          >
            Select Your <span>Perspective</span>
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="launcher-main-subtitle"
          >
            Access the specific toolset tailored to your role within the healthcare network.
          </motion.p>
        </div>

        <div className="portal-grid">
          {portals.map((portal, index) => (
            <PortalCard key={portal.title} {...portal} delay={0.2 + index * 0.05} />
          ))}
        </div>
      </main>

      <footer className="launcher-footer">
        <div className="footer-info">
          <div className="info-item">
            <span className="label">System Load</span>
            <div className="progress-bar"><div className="progress-fill" style={{ width: '24%' }} /></div>
          </div>
          <div className="info-item">
            <span className="label">Active Nodes</span>
            <span className="value">1,284</span>
          </div>
          <div className="info-item">
            <span className="label">Live Fleet</span>
            <span className="value">48 Units</span>
          </div>
        </div>
        <div className="footer-links">
          <a href="#">Support</a>
          <a href="#">Documentation <ExternalLink size={12} /></a>
          <a href="#">System Status</a>
        </div>
      </footer>
    </div>
  );
};
