import React, { useState, useEffect } from 'react';
import { 
  Heart, Phone, Mail, Eye, EyeOff, MapPin, 
  Calendar, Clock, Shield, Star, ChevronRight,
  User, Search, Filter, Home, FileText,
  Bell, Menu, X, CheckCircle, AlertTriangle,
  Droplets, Activity, Thermometer, Brain,
  CreditCard, Smartphone, Facebook, 
  MessageCircle, Headphones, Zap, Plus,
  ArrowLeft, ArrowRight, Download, Share2
} from 'lucide-react';

const CuraMedPatientApp = () => {
  const [currentScreen, setCurrentScreen] = useState('welcome');
  const [showPassword, setShowPassword] = useState(false);
  const [loginData, setLoginData] = useState({ phone: '', password: '' });
  const [registerData, setRegisterData] = useState({
    firstName: '', lastName: '', phone: '', email: '', password: ''
  });
  const [selectedTests, setSelectedTests] = useState([]);
  const [currentUser, setCurrentUser] = useState(null);

  // Color palette
  const colors = {
    deepPlum: '#564259',
    almostBlack: '#020102',
    grayBrown: '#635e61',
    offWhite: '#fcfbfc',
    warmBeige: '#a48a70',
    darkBrown: '#2a2622',
    lightLavender: '#bfade4',
    palePurple: '#dbd6e4',
    softGray: '#f8f5f5',
    purpleGray: '#55526f',
    warmBrown: '#a5735b',
    dustyRose: '#b694a9'
  };

  const mockUser = {
    name: 'John Adebayo',
    phone: '+234 803 123 4567',
    email: 'john.adebayo@email.com',
    location: 'Victoria Island, Lagos',
    totalTests: 8,
    lastTest: '2025-08-20',
    healthScore: 92
  };

  const popularTests = [
    { 
      id: 1, 
      name: 'Malaria Profile', 
      price: 32500, 
      duration: '24 hours', 
      category: 'Haematology',
      description: 'Complete malaria parasite detection',
      popular: true
    },
    { 
      id: 2, 
      name: 'Full Blood Count', 
      price: 15600, 
      duration: '4 hours', 
      category: 'Haematology',
      description: 'Complete blood analysis',
      popular: true
    },
    { 
      id: 3, 
      name: 'Lipid Profile', 
      price: 28900, 
      duration: '24 hours', 
      category: 'Chemistry',
      description: 'Cholesterol and heart health check',
      popular: true
    },
    { 
      id: 4, 
      name: 'Thyroid Function', 
      price: 45200, 
      duration: '48 hours', 
      category: 'Endocrinology',
      description: 'Complete thyroid hormone analysis',
      popular: false
    }
  ];

  const recentResults = [
    {
      id: 'CM001',
      testName: 'Malaria Profile',
      date: '2025-08-20',
      status: 'Complete',
      result: 'Normal',
      critical: false
    },
    {
      id: 'CM002', 
      testName: 'Full Blood Count',
      date: '2025-08-18',
      status: 'Complete',
      result: 'Minor abnormality',
      critical: false
    }
  ];

  const WelcomeScreen = () => (
    <div className="min-h-screen flex flex-col" style={{ backgroundColor: colors.deepPlum }}>
      {/* Header with gradient overlay */}
      <div className="relative flex-1 flex flex-col items-center justify-center px-6 py-12"
           style={{ 
             background: `linear-gradient(135deg, ${colors.deepPlum} 0%, ${colors.purpleGray} 50%, ${colors.dustyRose} 100%)`
           }}>
        
        {/* Logo and Brand */}
        <div className="text-center mb-12">
          <div className="w-24 h-24 mx-auto mb-6 rounded-2xl flex items-center justify-center"
               style={{ backgroundColor: colors.offWhite }}>
            <Heart className="h-12 w-12" style={{ color: colors.deepPlum }} />
          </div>
          <h1 className="text-4xl font-bold text-white mb-3">CuraMed</h1>
          <p className="text-lg opacity-90 text-white">Healthcare at your doorstep</p>
        </div>

        {/* Features highlights */}
        <div className="w-full max-w-sm space-y-4 mb-12">
          <div className="flex items-center space-x-4 text-white">
            <div className="p-3 rounded-xl" style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}>
              <Home className="h-6 w-6" />
            </div>
            <div>
              <h3 className="font-semibold">Home Collection</h3>
              <p className="text-sm opacity-80">Professional phlebotomists come to you</p>
            </div>
          </div>
          <div className="flex items-center space-x-4 text-white">
            <div className="p-3 rounded-xl" style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}>
              <Clock className="h-6 w-6" />
            </div>
            <div>
              <h3 className="font-semibold">Fast Results</h3>
              <p className="text-sm opacity-80">Get results in 4-72 hours</p>
            </div>
          </div>
          <div className="flex items-center space-x-4 text-white">
            <div className="p-3 rounded-xl" style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}>
              <Shield className="h-6 w-6" />
            </div>
            <div>
              <h3 className="font-semibold">Trusted Labs</h3>
              <p className="text-sm opacity-80">Partnered with leading Nigerian labs</p>
            </div>
          </div>
        </div>

        {/* CTA Buttons */}
        <div className="w-full max-w-sm space-y-4">
          <button 
            onClick={() => setCurrentScreen('login')}
            className="w-full py-4 rounded-2xl font-semibold text-lg transition-all duration-300 hover:scale-105"
            style={{ 
              backgroundColor: colors.offWhite, 
              color: colors.deepPlum 
            }}
          >
            Log In
          </button>
          <button 
            onClick={() => setCurrentScreen('register')}
            className="w-full py-4 rounded-2xl font-semibold text-lg border-2 text-white transition-all duration-300 hover:bg-white hover:text-opacity-90"
            style={{ borderColor: colors.offWhite }}
          >
            Create Account
          </button>
        </div>

        {/* Skip option */}
        <button 
          onClick={() => setCurrentScreen('browse')}
          className="mt-6 text-white opacity-75 hover:opacity-100 transition-opacity"
        >
          Browse tests without account
        </button>
      </div>

      {/* Footer */}
      <div className="p-6 text-center">
        <p className="text-white text-sm opacity-75">
          Serving Lagos • Victoria Island • Lekki • Ikeja • Ikoyi
        </p>
      </div>
    </div>
  );

  const LoginScreen = () => (
    <div className="min-h-screen" style={{ backgroundColor: colors.softGray }}>
      {/* Header */}
      <div className="flex items-center justify-between p-6" style={{ backgroundColor: colors.offWhite }}>
        <button 
          onClick={() => setCurrentScreen('welcome')}
          className="p-2 rounded-lg hover:bg-gray-100"
        >
          <ArrowLeft className="h-6 w-6" style={{ color: colors.deepPlum }} />
        </button>
        <h2 className="text-xl font-bold" style={{ color: colors.deepPlum }}>Log In</h2>
        <div></div>
      </div>

      <div className="p-6">
        {/* Welcome back message */}
        <div className="text-center mb-8">
          <div className="w-20 h-20 mx-auto mb-4 rounded-2xl flex items-center justify-center"
               style={{ backgroundColor: colors.lightLavender }}>
            <User className="h-10 w-10" style={{ color: colors.deepPlum }} />
          </div>
          <h1 className="text-2xl font-bold mb-2" style={{ color: colors.deepPlum }}>
            Welcome Back
          </h1>
          <p style={{ color: colors.grayBrown }}>
            Log in to access your health records
          </p>
        </div>

        {/* Login Form */}
        <div className="space-y-6">
          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: colors.deepPlum }}>
              Phone Number
            </label>
            <div className="relative">
              <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5" 
                     style={{ color: colors.grayBrown }} />
              <input
                type="tel"
                placeholder="+234 800 000 0000"
                value={loginData.phone}
                onChange={(e) => setLoginData({...loginData, phone: e.target.value})}
                className="w-full pl-12 pr-4 py-4 rounded-xl border-2 focus:outline-none focus:border-opacity-70"
                style={{ 
                  borderColor: colors.palePurple,
                  backgroundColor: colors.offWhite
                }}
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2" style={{ color: colors.deepPlum }}>
              Password
            </label>
            <div className="relative">
              <input
                type={showPassword ? 'text' : 'password'}
                placeholder="Enter your password"
                value={loginData.password}
                onChange={(e) => setLoginData({...loginData, password: e.target.value})}
                className="w-full pl-4 pr-12 py-4 rounded-xl border-2 focus:outline-none focus:border-opacity-70"
                style={{ 
                  borderColor: colors.palePurple,
                  backgroundColor: colors.offWhite
                }}
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 transform -translate-y-1/2"
              >
                {showPassword ? 
                  <EyeOff className="h-5 w-5" style={{ color: colors.grayBrown }} /> :
                  <Eye className="h-5 w-5" style={{ color: colors.grayBrown }} />
                }
              </button>
            </div>
          </div>

          <button
            onClick={() => {
              setCurrentUser(mockUser);
              setCurrentScreen('dashboard');
            }}
            className="w-full py-4 rounded-xl font-semibold text-lg text-white transition-all duration-300 hover:opacity-90"
            style={{ backgroundColor: colors.deepPlum }}
          >
            Log In
          </button>

          <button className="w-full text-center py-2" style={{ color: colors.warmBeige }}>
            Forgot Password?
          </button>
        </div>

        {/* Divider */}
        <div className="flex items-center my-8">
          <div className="flex-1 border-t" style={{ borderColor: colors.palePurple }}></div>
          <span className="px-4 text-sm" style={{ color: colors.grayBrown }}>or continue with</span>
          <div className="flex-1 border-t" style={{ borderColor: colors.palePurple }}></div>
        </div>

        {/* Social Login */}
        <div className="space-y-4">
          <button className="w-full flex items-center justify-center space-x-3 py-4 rounded-xl border-2 transition-all duration-300 hover:bg-gray-50"
                  style={{ borderColor: colors.palePurple }}>
            <Phone className="h-5 w-5 text-green-600" />
            <span style={{ color: colors.deepPlum }}>Continue with WhatsApp</span>
          </button>
          
          <button className="w-full flex items-center justify-center space-x-3 py-4 rounded-xl border-2 transition-all duration-300 hover:bg-gray-50"
                  style={{ borderColor: colors.palePurple }}>
            <Facebook className="h-5 w-5 text-blue-600" />
            <span style={{ color: colors.deepPlum }}>Continue with Facebook</span>
          </button>
        </div>

        {/* Sign up link */}
        <div className="text-center mt-8">
          <span style={{ color: colors.grayBrown }}>Don't have an account? </span>
          <button 
            onClick={() => setCurrentScreen('register')}
            className="font-semibold"
            style={{ color: colors.warmBeige }}
          >
            Sign Up
          </button>
        </div>
      </div>
    </div>
  );

  const DashboardScreen = () => (
    <div className="min-h-screen" style={{ backgroundColor: colors.softGray }}>
      {/* Header */}
      <div className="p-6" style={{ backgroundColor: colors.offWhite }}>
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center space-x-3">
            <div className="w-12 h-12 rounded-full flex items-center justify-center"
                 style={{ backgroundColor: colors.lightLavender }}>
              <User className="h-6 w-6" style={{ color: colors.deepPlum }} />
            </div>
            <div>
              <h2 className="font-bold" style={{ color: colors.deepPlum }}>
                Hello, {currentUser?.name.split(' ')[0]}!
              </h2>
              <p className="text-sm" style={{ color: colors.grayBrown }}>
                How can we help you today?
              </p>
            </div>
          </div>
          <div className="flex items-center space-x-3">
            <button className="p-3 rounded-xl relative" style={{ backgroundColor: colors.softGray }}>
              <Bell className="h-5 w-5" style={{ color: colors.deepPlum }} />
              <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">
                2
              </span>
            </button>
          </div>
        </div>

        {/* Health Score Card */}
        <div className="rounded-2xl p-6 mb-6"
             style={{ 
               background: `linear-gradient(135deg, ${colors.warmBeige} 0%, ${colors.warmBrown} 100%)`
             }}>
          <div className="flex items-center justify-between text-white">
            <div>
              <h3 className="text-2xl font-bold">{currentUser?.healthScore}%</h3>
              <p className="opacity-90">Health Score</p>
            </div>
            <div className="text-right">
              <p className="text-sm opacity-75">{currentUser?.totalTests} tests completed</p>
              <p className="text-sm opacity-75">Last: {currentUser?.lastTest}</p>
            </div>
            <Heart className="h-12 w-12 opacity-30" />
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="px-6 mb-6">
        <h3 className="text-lg font-bold mb-4" style={{ color: colors.deepPlum }}>
          Quick Actions
        </h3>
        <div className="grid grid-cols-2 gap-4">
          <button 
            onClick={() => setCurrentScreen('browse')}
            className="p-6 rounded-2xl text-left transition-all duration-300 hover:scale-105"
            style={{ backgroundColor: colors.offWhite }}
          >
            <Search className="h-8 w-8 mb-3" style={{ color: colors.deepPlum }} />
            <h4 className="font-semibold mb-1" style={{ color: colors.deepPlum }}>Book Test</h4>
            <p className="text-sm" style={{ color: colors.grayBrown }}>Find & schedule tests</p>
          </button>
          
          <button 
            onClick={() => setCurrentScreen('results')}
            className="p-6 rounded-2xl text-left transition-all duration-300 hover:scale-105"
            style={{ backgroundColor: colors.offWhite }}
          >
            <FileText className="h-8 w-8 mb-3" style={{ color: colors.warmBeige }} />
            <h4 className="font-semibold mb-1" style={{ color: colors.deepPlum }}>My Results</h4>
            <p className="text-sm" style={{ color: colors.grayBrown }}>View test reports</p>
          </button>
        </div>
      </div>

      {/* Popular Tests */}
      <div className="px-6 mb-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-bold" style={{ color: colors.deepPlum }}>
            Popular Tests
          </h3>
          <button 
            onClick={() => setCurrentScreen('browse')}
            style={{ color: colors.warmBeige }}
          >
            View All
          </button>
        </div>
        <div className="space-y-3">
          {popularTests.filter(test => test.popular).map(test => (
            <div key={test.id} 
                 className="p-4 rounded-xl flex items-center justify-between transition-all duration-300 hover:shadow-md"
                 style={{ backgroundColor: colors.offWhite }}>
              <div className="flex-1">
                <h4 className="font-semibold mb-1" style={{ color: colors.deepPlum }}>
                  {test.name}
                </h4>
                <p className="text-sm mb-2" style={{ color: colors.grayBrown }}>
                  {test.description}
                </p>
                <div className="flex items-center space-x-4 text-xs">
                  <span style={{ color: colors.warmBeige }}>₦{test.price.toLocaleString()}</span>
                  <span style={{ color: colors.grayBrown }}>{test.duration}</span>
                </div>
              </div>
              <button className="p-2 rounded-lg" style={{ backgroundColor: colors.softGray }}>
                <ChevronRight className="h-5 w-5" style={{ color: colors.deepPlum }} />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Recent Results */}
      <div className="px-6 mb-6">
        <h3 className="text-lg font-bold mb-4" style={{ color: colors.deepPlum }}>
          Recent Results
        </h3>
        <div className="space-y-3">
          {recentResults.map(result => (
            <div key={result.id}
                 className="p-4 rounded-xl transition-all duration-300 hover:shadow-md"
                 style={{ backgroundColor: colors.offWhite }}>
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <h4 className="font-semibold mb-1" style={{ color: colors.deepPlum }}>
                    {result.testName}
                  </h4>
                  <p className="text-sm" style={{ color: colors.grayBrown }}>
                    {result.date} • {result.result}
                  </p>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-500" />
                  <button className="p-2 rounded-lg" style={{ backgroundColor: colors.softGray }}>
                    <Eye className="h-4 w-4" style={{ color: colors.deepPlum }} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 p-4" style={{ backgroundColor: colors.offWhite }}>
        <div className="flex items-center justify-around">
          <button 
            className="flex flex-col items-center space-y-1"
            style={{ color: colors.deepPlum }}
          >
            <Home className="h-6 w-6" />
            <span className="text-xs font-medium">Home</span>
          </button>
          <button 
            onClick={() => setCurrentScreen('browse')}
            className="flex flex-col items-center space-y-1"
            style={{ color: colors.grayBrown }}
          >
            <Search className="h-6 w-6" />
            <span className="text-xs">Browse</span>
          </button>
          <button 
            onClick={() => setCurrentScreen('results')}
            className="flex flex-col items-center space-y-1"
            style={{ color: colors.grayBrown }}
          >
            <FileText className="h-6 w-6" />
            <span className="text-xs">Results</span>
          </button>
          <button className="flex flex-col items-center space-y-1" style={{ color: colors.grayBrown }}>
            <MessageCircle className="h-6 w-6" />
            <span className="text-xs">Support</span>
          </button>
        </div>
      </div>
    </div>
  );

  const BrowseTestsScreen = () => (
    <div className="min-h-screen pb-24" style={{ backgroundColor: colors.softGray }}>
      {/* Header */}
      <div className="p-6" style={{ backgroundColor: colors.offWhite }}>
        <div className="flex items-center justify-between mb-4">
          <button 
            onClick={() => setCurrentScreen(currentUser ? 'dashboard' : 'welcome')}
            className="p-2 rounded-lg hover:bg-gray-100"
          >
            <ArrowLeft className="h-6 w-6" style={{ color: colors.deepPlum }} />
          </button>
          <h2 className="text-xl font-bold" style={{ color: colors.deepPlum }}>Browse Tests</h2>
          <button className="p-2 rounded-lg hover:bg-gray-100">
            <Filter className="h-6 w-6" style={{ color: colors.deepPlum }} />
          </button>
        </div>

        {/* Search Bar */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5" 
                 style={{ color: colors.grayBrown }} />
          <input
            type="text"
            placeholder="Search for tests..."
            className="w-full pl-12 pr-4 py-3 rounded-xl border-2 focus:outline-none focus:border-opacity-70"
            style={{ 
              borderColor: colors.palePurple,
              backgroundColor: colors.softGray
            }}
          />
        </div>
      </div>

      {/* Test Categories */}
      <div className="px-6 mb-6">
        <h3 className="text-lg font-bold mb-4" style={{ color: colors.deepPlum }}>
          Categories
        </h3>
        <div className="flex space-x-3 overflow-x-auto pb-2">
          {[
            { name: 'Popular', icon: <Star />, color: colors.warmBeige },
            { name: 'Haematology', icon: <Droplets />, color: colors.dustyRose },
            { name: 'Chemistry', icon: <Activity />, color: colors.lightLavender },
            { name: 'Endocrinology', icon: <Brain />, color: colors.purpleGray }
          ].map((category, index) => (
            <button key={index}
                    className="flex flex-col items-center space-y-2 p-4 rounded-xl whitespace-nowrap transition-all duration-300 hover:scale-105"
                    style={{ backgroundColor: colors.offWhite }}>
              <div className="p-3 rounded-xl" style={{ backgroundColor: `${category.color}20` }}>
                {React.cloneElement(category.icon, { 
                  className: "h-6 w-6",
                  style: { color: category.color }
                })}
              </div>
              <span className="text-sm font-medium" style={{ color: colors.deepPlum }}>
                {category.name}
              </span>
            </button>
          ))}
        </div>
      </div>

      {/* All Tests */}
      <div className="px-6">
        <h3 className="text-lg font-bold mb-4" style={{ color: colors.deepPlum }}>
          All Tests
        </h3>
        <div className="space-y-4">
          {popularTests.map(test => (
            <div key={test.id}
                 className="p-4 rounded-xl transition-all duration-300 hover:shadow-md"
                 style={{ backgroundColor: colors.offWhite }}>
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <h4 className="font-semibold mb-1" style={{ color: colors.deepPlum }}>
                    {test.name}
                  </h4>
                  <p className="text-sm mb-2" style={{ color: colors.grayBrown }}>
                    {test.description}
                  </p>
                  <div className="flex items-center space-x-4 text-sm">
                    <span className="font-bold" style={{ color: colors.warmBeige }}>
                      ₦{test.price.toLocaleString()}
                    </span>
                    <span style={{ color: colors.grayBrown }}>
                      <Clock className="h-4 w-4 inline mr-1" />
                      {test.duration}
                    </span>
                    <span className="px-2 py-1 rounded-full text-xs"
                          style={{ 
                            backgroundColor: colors.softGray,
                            color: colors.purpleGray
                          }}>
                      {test.category}
                    </span>
                  </div>
                </div>
              </div>
              
              <div className="flex items-center justify-between">
                <button className="flex-1 mr-3 py-3 rounded-xl font-medium transition-all duration-300 hover:opacity-90"
                        style={{ 
                          backgroundColor: colors.deepPlum,
                          color: colors.offWhite
                        }}>
                  Book Now
                </button>
                <button className="p-3 rounded-xl" style={{ backgroundColor: colors.softGray }}>
                  <Heart className="h-5 w-5" style={{ color: colors.grayBrown }} />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  // Screen routing
  const renderScreen = () => {
    switch(currentScreen) {
      case 'welcome':
        return <WelcomeScreen />;
      case 'login':
        return <LoginScreen />;
      case 'dashboard':
        return <DashboardScreen />;
      case 'browse':
        return <BrowseTestsScreen />;
      default:
        return <WelcomeScreen />;
    }
  };

  return (
    <div className="max-w-sm mx-auto bg-white shadow-xl">
      {renderScreen()}
    </div>
  );
};

export default CuraMedPatientApp;