import React, { useState } from 'react';
import { Database, Cloud, Lock, Zap, Mail, MessageSquare, CreditCard, Video, FileText, Calendar, Users, Building2, Shield, Smartphone, Globe, Server, Layers, ArrowRight, Code } from 'lucide-react';

const TechArchitecture = () => {
  const [activeLayer, setActiveLayer] = useState(null);

  const layers = {
    frontend: {
      title: "Frontend Layer",
      color: "bg-blue-500",
      items: [
        { icon: Globe, name: "React 18+", desc: "Component-based UI" },
        { icon: Smartphone, name: "React Native", desc: "Mobile apps (iOS/Android)" },
        { icon: Layers, name: "Tailwind CSS", desc: "Utility-first styling" },
        { icon: Code, name: "State Management", desc: "Zustand / Redux Toolkit" }
      ]
    },
    backend: {
      title: "Backend Services (Supabase)",
      color: "bg-green-500",
      items: [
        { icon: Database, name: "PostgreSQL", desc: "Primary database with RLS" },
        { icon: Lock, name: "Auth", desc: "JWT, 2FA, RBAC" },
        { icon: Cloud, name: "Storage", desc: "Documents & files" },
        { icon: Zap, name: "Edge Functions", desc: "Serverless compute" }
      ]
    },
    integrations: {
      title: "Third-Party Integrations",
      color: "bg-purple-500",
      items: [
        { icon: MessageSquare, name: "WhatsApp API", desc: "Twilio / 360dialog" },
        { icon: Mail, name: "Email Service", desc: "SendGrid / Resend" },
        { icon: CreditCard, name: "Payments", desc: "Stripe / PayPal" },
        { icon: Video, name: "Telehealth", desc: "Twilio / Agora" }
      ]
    },
    security: {
      title: "Security & Compliance",
      color: "bg-red-500",
      items: [
        { icon: Shield, name: "HIPAA Compliance", desc: "Encryption, audit logs" },
        { icon: Lock, name: "RLS Policies", desc: "Row-level security" },
        { icon: FileText, name: "Audit Trails", desc: "Activity logging" },
        { icon: Server, name: "SSL/TLS", desc: "Data in transit" }
      ]
    }
  };

  const modules = [
    { name: "Patient CRM", icon: Users, color: "bg-cyan-500" },
    { name: "Scheduling", icon: Calendar, color: "bg-indigo-500" },
    { name: "EHR/Notes", icon: FileText, color: "bg-emerald-500" },
    { name: "Billing", icon: CreditCard, color: "bg-amber-500" },
    { name: "Portal", icon: Globe, color: "bg-pink-500" },
    { name: "Multi-Clinic", icon: Building2, color: "bg-violet-500" }
  ];

  return (
    <div className="w-full h-full bg-gradient-to-br from-slate-50 to-slate-100 p-8 overflow-auto">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-slate-800 mb-3">
            Clinic Management System
          </h1>
          <p className="text-xl text-slate-600">Technical Architecture Overview</p>
          <div className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-blue-100 rounded-full">
            <Code className="w-5 h-5 text-blue-600" />
            <span className="text-sm font-semibold text-blue-700">React + Tailwind + Supabase</span>
          </div>
        </div>

        {/* Architecture Layers */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
          {Object.entries(layers).map(([key, layer]) => (
            <div
              key={key}
              className={`bg-white rounded-xl shadow-lg border-2 transition-all duration-300 ${
                activeLayer === key ? 'border-blue-500 scale-105' : 'border-transparent'
              }`}
              onMouseEnter={() => setActiveLayer(key)}
              onMouseLeave={() => setActiveLayer(null)}
            >
              <div className={`${layer.color} text-white px-6 py-4 rounded-t-xl`}>
                <h3 className="text-xl font-bold">{layer.title}</h3>
              </div>
              <div className="p-6 grid grid-cols-2 gap-4">
                {layer.items.map((item, idx) => (
                  <div key={idx} className="flex flex-col items-center text-center p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
                    <item.icon className="w-8 h-8 mb-2 text-slate-700" />
                    <h4 className="font-semibold text-sm text-slate-800 mb-1">{item.name}</h4>
                    <p className="text-xs text-slate-600">{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Core Modules */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-12">
          <h3 className="text-2xl font-bold text-slate-800 mb-6 text-center">Core Application Modules</h3>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {modules.map((module, idx) => (
              <div key={idx} className="flex flex-col items-center p-4 bg-slate-50 rounded-lg hover:shadow-md transition-shadow">
                <div className={`${module.color} p-3 rounded-lg mb-3`}>
                  <module.icon className="w-6 h-6 text-white" />
                </div>
                <span className="text-sm font-semibold text-slate-700 text-center">{module.name}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Data Flow */}
        <div className="bg-white rounded-xl shadow-lg p-8">
          <h3 className="text-2xl font-bold text-slate-800 mb-6 text-center">Data Flow Architecture</h3>
          <div className="flex flex-col md:flex-row items-center justify-center gap-6">
            <div className="flex flex-col items-center">
              <div className="w-32 h-32 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                <Globe className="w-16 h-16 text-white" />
              </div>
              <p className="mt-3 font-semibold text-slate-700">Client Apps</p>
              <p className="text-xs text-slate-500">Web + Mobile</p>
            </div>

            <ArrowRight className="w-8 h-8 text-slate-400 rotate-90 md:rotate-0" />

            <div className="flex flex-col items-center">
              <div className="w-32 h-32 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                <Server className="w-16 h-16 text-white" />
              </div>
              <p className="mt-3 font-semibold text-slate-700">Supabase API</p>
              <p className="text-xs text-slate-500">REST + Realtime</p>
            </div>

            <ArrowRight className="w-8 h-8 text-slate-400 rotate-90 md:rotate-0" />

            <div className="flex flex-col items-center">
              <div className="w-32 h-32 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                <Database className="w-16 h-16 text-white" />
              </div>
              <p className="mt-3 font-semibold text-slate-700">PostgreSQL</p>
              <p className="text-xs text-slate-500">Multi-tenant DB</p>
            </div>
          </div>

          {/* Additional Services */}
          <div className="mt-8 pt-8 border-t border-slate-200">
            <p className="text-center text-sm font-semibold text-slate-600 mb-4">External Services Layer</p>
            <div className="flex flex-wrap justify-center gap-3">
              {[
                { name: "WhatsApp", icon: MessageSquare },
                { name: "Email", icon: Mail },
                { name: "Payments", icon: CreditCard },
                { name: "Video Call", icon: Video },
                { name: "File Storage", icon: Cloud }
              ].map((service, idx) => (
                <div key={idx} className="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-full">
                  <service.icon className="w-4 h-4 text-slate-600" />
                  <span className="text-sm text-slate-700">{service.name}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Key Features */}
        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
            <Shield className="w-10 h-10 text-blue-600 mb-3" />
            <h4 className="font-bold text-lg text-slate-800 mb-2">HIPAA Compliant</h4>
            <p className="text-sm text-slate-600">End-to-end encryption, audit trails, and secure data handling</p>
          </div>
          <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200">
            <Layers className="w-10 h-10 text-green-600 mb-3" />
            <h4 className="font-bold text-lg text-slate-800 mb-2">Multi-Tenant</h4>
            <p className="text-sm text-slate-600">Row-level security for complete data isolation between clinics</p>
          </div>
          <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
            <Zap className="w-10 h-10 text-purple-600 mb-3" />
            <h4 className="font-bold text-lg text-slate-800 mb-2">Real-time Updates</h4>
            <p className="text-sm text-slate-600">Live calendar updates and instant notifications via WebSockets</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TechArchitecture;