import React, { useState } from 'react';
import { ChevronDown, Shield, Users, FileText, Calendar, BookOpen, Phone, Menu, X, AlertCircle, TrendingUp, Clock, Download } from 'lucide-react';

const GovernancePortal = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [userType, setUserType] = useState('member'); // 'public', 'member', 'consultant'

  const navigation = [
    { id: 'dashboard', label: 'Dashboard', icon: TrendingUp, memberOnly: false },
    { id: 'documents', label: 'Documents', icon: FileText, memberOnly: true },
    { id: 'meetings', label: 'Meetings', icon: Calendar, memberOnly: true },
    { id: 'complaints', label: 'Complaints', icon: AlertCircle, memberOnly: true },
    { id: 'consulting', label: 'Consulting Services', icon: BookOpen, memberOnly: false },
    { id: 'contact', label: 'Contact', icon: Phone, memberOnly: false }
  ];

  const filteredNavigation = navigation.filter(item => 
    !item.memberOnly || userType !== 'public'
  );

  const renderDashboard = () => (
    <div className="space-y-8">
      <div className="bg-gradient-to-r from-yellow-50 to-amber-50 border border-yellow-200 rounded-xl p-6">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">Welcome to Civil Sage Solutions</h2>
        <p className="text-gray-700 leading-relaxed">
          Your comprehensive platform for cooperative governance, procedural fairness, and institutional accountability. 
          Access real-time board updates, secure document management, and professional consulting services designed 
          to strengthen democratic governance and resolve complex organizational disputes.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-shadow">
          <div className="flex items-center mb-4">
            <div className="bg-gradient-to-r from-yellow-400 to-amber-500 p-3 rounded-lg">
              <Shield className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold text-gray-800 ml-3">Governance Tools</h3>
          </div>
          <p className="text-gray-600 mb-4">
            Access procedural fairness frameworks, compliance tracking, and governance assessment tools.
          </p>
          <button className="w-full bg-gradient-to-r from-yellow-500 to-amber-600 text-white py-2 px-4 rounded-lg hover:from-yellow-600 hover:to-amber-700 transition-all transform hover:scale-105 shadow-md">
            Explore Tools
          </button>
        </div>

        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-shadow">
          <div className="flex items-center mb-4">
            <div className="bg-gradient-to-r from-gray-700 to-gray-900 p-3 rounded-lg">
              <Users className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold text-gray-800 ml-3">Community Hub</h3>
          </div>
          <p className="text-gray-600 mb-4">
            Connect with board members, access meeting minutes, and submit feedback through secure channels.
          </p>
          <button className="w-full bg-gradient-to-r from-gray-700 to-gray-900 text-white py-2 px-4 rounded-lg hover:from-gray-800 hover:to-black transition-all transform hover:scale-105 shadow-md">
            Join Community
          </button>
        </div>

        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-shadow">
          <div className="flex items-center mb-4">
            <div className="bg-gradient-to-r from-amber-500 to-yellow-600 p-3 rounded-lg">
              <BookOpen className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold text-gray-800 ml-3">Knowledge Base</h3>
          </div>
          <p className="text-gray-600 mb-4">
            Download toolkits, access governance guides, and explore dispute resolution templates.
          </p>
          <button className="w-full bg-gradient-to-r from-amber-500 to-yellow-600 text-white py-2 px-4 rounded-lg hover:from-amber-600 hover:to-yellow-700 transition-all transform hover:scale-105 shadow-md">
            Access Library
          </button>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
        <h3 className="text-xl font-semibold text-gray-800 mb-4">WDRM Analytics Dashboard</h3>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-gradient-to-r from-yellow-50 to-amber-50 p-4 rounded-lg border border-yellow-200">
            <div className="text-2xl font-bold text-amber-700">87%</div>
            <div className="text-sm text-gray-600">Compliance Score</div>
          </div>
          <div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg border border-green-200">
            <div className="text-2xl font-bold text-green-700">24</div>
            <div className="text-sm text-gray-600">Active Cases</div>
          </div>
          <div className="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-lg border border-blue-200">
            <div className="text-2xl font-bold text-blue-700">156</div>
            <div className="text-sm text-gray-600">Documents Processed</div>
          </div>
          <div className="bg-gradient-to-r from-purple-50 to-violet-50 p-4 rounded-lg border border-purple-200">
            <div className="text-2xl font-bold text-purple-700">98%</div>
            <div className="text-sm text-gray-600">Resolution Rate</div>
          </div>
        </div>
        <div className="bg-gradient-to-r from-gray-50 to-gray-100 p-4 rounded-lg">
          <div className="text-sm text-gray-600 mb-2">Recent Activity</div>
          <div className="space-y-2">
            <div className="flex items-center text-sm">
              <Clock className="w-4 h-4 text-gray-500 mr-2" />
              <span className="text-gray-800">Board meeting minutes uploaded - Dentonia Park Co-op</span>
            </div>
            <div className="flex items-center text-sm">
              <AlertCircle className="w-4 h-4 text-amber-500 mr-2" />
              <span className="text-gray-800">Procedural fairness review initiated</span>
            </div>
            <div className="flex items-center text-sm">
              <Download className="w-4 h-4 text-green-500 mr-2" />
              <span className="text-gray-800">Governance toolkit downloaded by 3 members</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderDocuments = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
        <h2 className="text-2xl font-bold text-gray-800 mb-6">Document Management Center</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-800">Board Documents</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
                <div className="flex items-center">
                  <FileText className="w-5 h-5 text-gray-600 mr-3" />
                  <div>
                    <div className="font-medium text-gray-800">Meeting Minutes - November 2024</div>
                    <div className="text-sm text-gray-600">General Membership Meeting</div>
                  </div>
                </div>
                <button className="text-amber-600 hover:text-amber-700 font-medium">View</button>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
                <div className="flex items-center">
                  <FileText className="w-5 h-5 text-gray-600 mr-3" />
                  <div>
                    <div className="font-medium text-gray-800">Procedural Fairness Notice</div>
                    <div className="text-sm text-gray-600">May 2025 Hearing Documentation</div>
                  </div>
                </div>
                <button className="text-amber-600 hover:text-amber-700 font-medium">View</button>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
                <div className="flex items-center">
                  <FileText className="w-5 h-5 text-gray-600 mr-3" />
                  <div>
                    <div className="font-medium text-gray-800">Legal Correspondence</div>
                    <div className="text-sm text-gray-600">Iler Campbell LLP Communications</div>
                  </div>
                </div>
                <button className="text-amber-600 hover:text-amber-700 font-medium">View</button>
              </div>
            </div>
          </div>
          
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-800">Governance Resources</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-gradient-to-r from-yellow-50 to-amber-50 rounded-lg border border-yellow-200">
                <div className="flex items-center">
                  <Download className="w-5 h-5 text-amber-600 mr-3" />
                  <div>
                    <div className="font-medium text-gray-800">Surviving Board Dysfunction Toolkit</div>
                    <div className="text-sm text-gray-600">Comprehensive governance guide</div>
                  </div>
                </div>
                <button className="text-amber-600 hover:text-amber-700 font-medium">Download</button>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg border border-gray-200">
                <div className="flex items-center">
                  <Download className="w-5 h-5 text-gray-600 mr-3" />
                  <div>
                    <div className="font-medium text-gray-800">Complaint Filing Templates</div>
                    <div className="text-sm text-gray-600">Standardized forms and procedures</div>
                  </div>
                </div>
                <button className="text-gray-600 hover:text-gray-700 font-medium">Download</button>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg border border-blue-200">
                <div className="flex items-center">
                  <Download className="w-5 h-5 text-blue-600 mr-3" />
                  <div>
                    <div className="font-medium text-gray-800">Conflict Resolution Framework</div>
                    <div className="text-sm text-gray-600">Mediation and dispute resolution tools</div>
                  </div>
                </div>
                <button className="text-blue-600 hover:text-blue-700 font-medium">Download</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderConsulting = () => (
    <div className="space-y-8">
      <div className="bg-gradient-to-r from-yellow-50 to-amber-50 border border-yellow-200 rounded-xl p-6">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">Civil Sage Solutions - Professional Consulting</h2>
        <p className="text-gray-700 leading-relaxed">
          Expert governance consulting, dispute resolution, and institutional reform services. 
          Our comprehensive approach combines legal expertise, organizational psychology, and 
          democratic governance principles to strengthen communities and resolve complex disputes.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
          <h3 className="text-xl font-semibold text-gray-800 mb-4">Core Services</h3>
          <div className="space-y-4">
            <div className="border-l-4 border-amber-500 pl-4">
              <h4 className="font-semibold text-gray-800">Governance Assessment</h4>
              <p className="text-gray-600 text-sm">Comprehensive evaluation of organizational structures, policies, and procedures</p>
            </div>
            <div className="border-l-4 border-gray-700 pl-4">
              <h4 className="font-semibold text-gray-800">Dispute Resolution</h4>
              <p className="text-gray-600 text-sm">Professional mediation and conflict resolution services</p>
            </div>
            <div className="border-l-4 border-yellow-500 pl-4">
              <h4 className="font-semibold text-gray-800">Policy Development</h4>
              <p className="text-gray-600 text-sm">Custom policy creation and procedural fairness implementation</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
          <h3 className="text-xl font-semibold text-gray-800 mb-4">Schedule Consultation</h3>
          <div className="space-y-4">
            <div className="bg-gradient-to-r from-gray-50 to-gray-100 p-4 rounded-lg">
              <h4 className="font-semibold text-gray-800 mb-2">Discovery Call</h4>
              <p className="text-gray-600 text-sm mb-3">30-minute initial consultation to assess your needs</p>
              <button className="w-full bg-gradient-to-r from-yellow-500 to-amber-600 text-white py-2 px-4 rounded-lg hover:from-yellow-600 hover:to-amber-700 transition-all">
                Book Discovery Call
              </button>
            </div>
            <div className="bg-gradient-to-r from-yellow-50 to-amber-50 p-4 rounded-lg border border-yellow-200">
              <h4 className="font-semibold text-gray-800 mb-2">Strategic Session</h4>
              <p className="text-gray-600 text-sm mb-3">90-minute deep-dive consultation with action plan</p>
              <button className="w-full bg-gradient-to-r from-gray-700 to-gray-900 text-white py-2 px-4 rounded-lg hover:from-gray-800 hover:to-black transition-all">
                Schedule Session
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderContent = () => {
    switch (activeTab) {
      case 'dashboard':
        return renderDashboard();
      case 'documents':
        return renderDocuments();
      case 'consulting':
        return renderConsulting();
      default:
        return renderDashboard();
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      {/* Header */}
      <header className="bg-white shadow-lg border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="bg-gradient-to-r from-yellow-500 to-amber-600 p-2 rounded-lg">
                <Shield className="w-8 h-8 text-white" />
              </div>
              <div className="ml-3">
                <h1 className="text-xl font-bold text-gray-800">Civil Sage Solutions</h1>
                <p className="text-sm text-gray-600">Governance & Consulting Portal</p>
              </div>
            </div>
            
            <div className="hidden md:flex items-center space-x-4">
              <select 
                value={userType} 
                onChange={(e) => setUserType(e.target.value)}
                className="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
              >
                <option value="public">Public Access</option>
                <option value="member">Member Access</option>
                <option value="consultant">Consultant Access</option>
              </select>
              <button className="bg-gradient-to-r from-yellow-500 to-amber-600 text-white px-4 py-2 rounded-lg hover:from-yellow-600 hover:to-amber-700 transition-all">
                Sign In
              </button>
            </div>
            
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-lg hover:bg-gray-100"
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Sidebar Navigation */}
          <div className="lg:w-64 space-y-2">
            <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-4">
              <h3 className="font-semibold text-gray-800 mb-4">Navigation</h3>
              <nav className="space-y-2">
                {filteredNavigation.map((item) => (
                  <button
                    key={item.id}
                    onClick={() => setActiveTab(item.id)}
                    className={`w-full flex items-center px-3 py-2 text-left rounded-lg transition-all ${
                      activeTab === item.id
                        ? 'bg-gradient-to-r from-yellow-500 to-amber-600 text-white shadow-md'
                        : 'text-gray-700 hover:bg-gray-100'
                    }`}
                  >
                    <item.icon className="w-5 h-5 mr-3" />
                    {item.label}
                  </button>
                ))}
              </nav>
            </div>
          </div>

          {/* Main Content */}
          <div className="flex-1">
            {renderContent()}
          </div>
        </div>
      </div>
    </div>
  );
};

export default GovernancePortal;