import { useState, useRef, useEffect } from 'react';
import { Upload, MessageSquare, Home, Star, Check } from 'lucide-react';

type AnalysisResult = {
  skinCondition: string;
  hairHealth: string;
  eyeHealth: string;
  posture: string;
  overallGlow: number;
};

type DailyRoutine = {
  morning: string[];
  afternoon: string[];
  evening: string[];
};

type ChatMessage = {
  sender: 'user' | 'ai';
  text: string;
  timestamp: Date;
};

export default function Faceify() {
  const [activeTab, setActiveTab] = useState<'home' | 'chat'>('home');
  const [image, setImage] = useState<string | null>(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [analysis, setAnalysis] = useState<AnalysisResult | null>(null);
  const [routine, setRoutine] = useState<DailyRoutine | null>(null);
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
  const [userMessage, setUserMessage] = useState('');
  const fileInputRef = useRef<HTMLInputElement>(null);
  const chatContainerRef = useRef<HTMLDivElement>(null);

  // Scroll chat to bottom when new messages arrive
  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [chatMessages]);

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setImage(event.target?.result as string);
        analyzeImage();
      };
      reader.readAsDataURL(file);
    }
  };

  const analyzeImage = () => {
    setIsAnalyzing(true);
    // Mock analysis - in a real app this would be an API call
    setTimeout(() => {
      const mockAnalysis: AnalysisResult = {
        skinCondition: ['Dry', 'Oily', 'Normal', 'Combination'][Math.floor(Math.random() * 4)],
        hairHealth: ['Healthy', 'Dry', 'Oily', 'Damaged'][Math.floor(Math.random() * 4)],
        eyeHealth: ['Bright', 'Tired', 'Puffy', 'Dark circles'][Math.floor(Math.random() * 4)],
        posture: ['Good', 'Fair', 'Poor', 'Excellent'][Math.floor(Math.random() * 4)],
        overallGlow: Math.floor(Math.random() * 5) + 1
      };
      setAnalysis(mockAnalysis);
      generateRoutine(mockAnalysis);
      setIsAnalyzing(false);
    }, 2000);
  };

  const generateRoutine = (analysis: AnalysisResult) => {
    const mockRoutine: DailyRoutine = {
      morning: [
        'Cleanse face with gentle cleanser',
        'Apply moisturizer with SPF',
        analysis.hairHealth === 'Dry' ? 'Use hydrating hair mask' : 'Use regular conditioner'
      ],
      afternoon: [
        'Reapply sunscreen if going outside',
        'Drink at least 8oz of water',
        analysis.eyeHealth === 'Tired' ? 'Use cooling eye patches' : 'Take a short break from screens'
      ],
      evening: [
        'Double cleanse face',
        'Apply night cream',
        analysis.skinCondition === 'Oily' ? 'Use oil-free moisturizer' : 'Use hydrating serum',
        'Practice good posture exercises'
      ]
    };
    setRoutine(mockRoutine);
  };

  const handleSendMessage = () => {
    if (!userMessage.trim()) return;

    const newUserMessage: ChatMessage = {
      sender: 'user',
      text: userMessage,
      timestamp: new Date()
    };

    setChatMessages(prev => [...prev, newUserMessage]);
    setUserMessage('');

    // Mock AI response
    setTimeout(() => {
      const aiResponses = [
        "Based on your analysis, I recommend focusing on hydration for your skin.",
        "Your hair health could benefit from weekly deep conditioning treatments.",
        "For better posture, try these exercises: shoulder rolls, chin tucks, and wall angels.",
        "To improve your glow, consider adding vitamin C serum to your routine.",
        "Your eye health suggests you might need more sleep. Aim for 7-8 hours nightly."
      ];
      
      const newAiMessage: ChatMessage = {
        sender: 'ai',
        text: aiResponses[Math.floor(Math.random() * aiResponses.length)],
        timestamp: new Date()
      };
      setChatMessages(prev => [...prev, newAiMessage]);
    }, 1000);
  };

  const resetAnalysis = () => {
    setImage(null);
    setAnalysis(null);
    setRoutine(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-600">Faceify</h1>
          <div className="flex space-x-2">
            <button
              onClick={() => setActiveTab('home')}
              className={`px-4 py-2 rounded-md flex items-center ${
                activeTab === 'home' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
              }`}
            >
              <Home className="mr-2 h-4 w-4" />
              Home
            </button>
            <button
              onClick={() => setActiveTab('chat')}
              className={`px-4 py-2 rounded-md flex items-center ${
                activeTab === 'chat' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'
              }`}
            >
              <MessageSquare className="mr-2 h-4 w-4" />
              AI Assistant
            </button>
          </div>
        </div>
      <link rel="me" href="https://www.blogger.com/profile/09137824340140033992" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>

</header><body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: 'https://www.blogger.com/navbar/1679145202512384088?origin\x3dhttps://filmeguy.blogspot.com',
              where: document.getElementById("navbar-iframe-container"),
              id: "navbar-iframe"
          });
        }
      });
    </script>

      <main className="container mx-auto px-4 py-8">
        {activeTab === 'home' ? (
          <div className="space-y-8">
            {/* Upload Section */}
            <div className="bg-white rounded-lg shadow-md overflow-hidden">
              <div className="p-6 border-b">
                <h2 className="text-xl font-semibold">Upload Your Photo</h2>
                <p className="text-gray-600 text-sm mt-1">
                  Upload a clear selfie or full-body photo for analysis. Your photo is processed locally and never stored on our servers.
                </p>
              </div>
              <div className="p-6">
                {!image ? (
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                    <Upload className="mx-auto h-12 w-12 text-gray-400" />
                    <div className="mt-4 flex justify-center">
                      <button
                        onClick={() => fileInputRef.current?.click()}
                        className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
                      >
                        Select Image
                      </button>
                      <input
                        ref={fileInputRef}
                        type="file"
                        accept="image/*"
                        onChange={handleImageUpload}
                        className="hidden"
                      />
                    </div>
                    <p className="mt-2 text-sm text-gray-600">Or drag and drop your image here</p>
                  </div>
                ) : (
                  <div className="flex flex-col items-center">
                    <div className="relative">
                      <img
                        src={image}
                        alt="Uploaded preview"
                        className="h-64 w-64 object-cover rounded-lg shadow-md"
                      />
                      {isAnalyzing && (
                        <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center rounded-lg">
                          <div className="h-12 w-12 border-4 border-white border-t-transparent rounded-full animate-spin"></div>
                        </div>
                      )}
                    </div>
                    <button
                      onClick={resetAnalysis}
                      className="mt-4 bg-gray-100 text-gray-700 px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-200 transition-colors"
                    >
                      Upload New Image
                    </button>
                  </div>
                )}
              </div>
            </div>

            {/* Analysis Results */}
            {analysis && (
              <div className="bg-white rounded-lg shadow-md overflow-hidden animate-fade-in">
                <div className="p-6 border-b">
                  <h2 className="text-xl font-semibold">Your Analysis Results</h2>
                  <p className="text-gray-600 text-sm mt-1">
                    Based on our AI assessment of your uploaded image
                  </p>
                </div>
                <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="font-medium">Skin Condition</label>
                    <div className="p-2 bg-gray-100 rounded">{analysis.skinCondition}</div>
                  </div>
                  <div className="space-y-2">
                    <label className="font-medium">Hair Health</label>
                    <div className="p-2 bg-gray-100 rounded">{analysis.hairHealth}</div>
                  </div>
                  <div className="space-y-2">
                    <label className="font-medium">Eye Health</label>
                    <div className="p-2 bg-gray-100 rounded">{analysis.eyeHealth}</div>
                  </div>
                  <div className="space-y-2">
                    <label className="font-medium">Posture</label>
                    <div className="p-2 bg-gray-100 rounded">{analysis.posture}</div>
                  </div>
                  <div className="space-y-2">
                    <label className="font-medium">Overall Glow</label>
                    <div className="flex items-center">
                      {[...Array(5)].map((_, i) => (
                        <Star
                          key={i}
                          className={`h-5 w-5 ${i < analysis.overallGlow ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}`}
                        />
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Daily Routine */}
            {routine && (
              <div className="bg-white rounded-lg shadow-md overflow-hidden animate-fade-in">
                <div className="p-6 border-b">
                  <h2 className="text-xl font-semibold">Your Personalized Daily Routine</h2>
                  <p className="text-gray-600 text-sm mt-1">
                    Recommendations based on your analysis
                  </p>
                </div>
                <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div>
                    <h3 className="font-medium mb-2">Morning</h3>
                    <ul className="space-y-2">
                      {routine.morning.map((item, i) => (
                        <li key={i} className="flex items-start">
                          <Check className="h-4 w-4 mt-1 mr-2 text-green-500" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h3 className="font-medium mb-2">Afternoon</h3>
                    <ul className="space-y-2">
                      {routine.afternoon.map((item, i) => (
                        <li key={i} className="flex items-start">
                          <Check className="h-4 w-4 mt-1 mr-2 text-green-500" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h3 className="font-medium mb-2">Evening</h3>
                    <ul className="space-y-2">
                      {routine.evening.map((item, i) => (
                        <li key={i} className="flex items-start">
                          <Check className="h-4 w-4 mt-1 mr-2 text-green-500" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
                <div className="p-6 border-t">
                  <button
                    onClick={() => setActiveTab('chat')}
                    className="bg-gray-100 text-gray-700 px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-200 transition-colors flex items-center"
                  >
                    <MessageSquare className="mr-2 h-4 w-4" />
                    Ask our AI Assistant for more tips
                  </button>
                </div>
              </div>
            )}
          </div>
        ) : (
          /* Chat Assistant */
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6 border-b">
              <h2 className="text-xl font-semibold">AI Wellness Assistant</h2>
              <p className="text-gray-600 text-sm mt-1">
                Ask any questions about your grooming, styling, or wellness routine
              </p>
            </div>
            <div className="p-6">
              <div
                ref={chatContainerRef}
                className="h-96 overflow-y-auto space-y-4 mb-4"
              >
                {chatMessages.length === 0 ? (
                  <div className="text-center text-gray-500 h-full flex flex-col items-center justify-center">
                    <MessageSquare className="h-12 w-12 mb-4 text-gray-300" />
                    <p>Ask our AI assistant about your wellness routine</p>
                  </div>
                ) : (
                  chatMessages.map((message, i) => (
                    <div
                      key={i}
                      className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
                    >
                      <div
                        className={`max-w-xs md:max-w-md rounded-lg p-3 ${
                          message.sender === 'user'
                            ? 'bg-blue-600 text-white'
                            : 'bg-gray-100'
                        }`}
                      >
                        {message.text}
                      </div>
                    </div>
                  ))
                )}
              </div>
              <div className="flex space-x-2">
                <textarea
                  value={userMessage}
                  onChange={(e) => setUserMessage(e.target.value)}
                  placeholder="Ask about skincare, haircare, or wellness..."
                  className="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  rows={3}
                  onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSendMessage()}
                />
                <button
                  onClick={handleSendMessage}
                  className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors self-end"
                >
                  Send
                </button>
              </div>
            </div>
          </div>
        )}
      </main>

      <footer className="bg-white border-t mt-8 py-6">
        <div className="container mx-auto px-4 text-center text-sm text-gray-500">
          <p>Faceify - AI-powered wellness assistant. Your data is processed locally and never stored without consent.</p>
        </div>
      </footer>

      <style jsx global>{`
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin {
          animation: spin 1s linear infinite;
        }
        @keyframes fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        .animate-fade-in {
          animation: fade-in 0.5s ease-out;
        }
      `}</style>
    </div>
  );
}</body></html>