import React, { useEffect, useState } from 'react';
import TmaButton from '../components/TmaButton';
import TmaInput from '../components/TmaInput';
import TmaCard from '../components/TmaCard';
import TmaLoader from '../components/TmaLoader';

export default function Home() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [formData, setFormData] = useState({
    name: '',
    message: '',
  });
  const [response, setResponse] = useState(null);

  // Initialize Telegram WebApp SDK
  useEffect(() => {
    if (typeof window !== 'undefined' && window.Telegram?.WebApp) {
      const tg = window.Telegram.WebApp;
      
      // Expand the app to full height
      tg.expand();
      
      // Set theme colors based on user's Telegram theme
      document.body.style.backgroundColor = tg.themeParams.bg_color || '#ffffff';
      
      // Initialize user data if available
      if (tg.initDataUnsafe?.user) {
        setUser(tg.initDataUnsafe.user);
        setFormData(prev => ({
          ...prev,
          name: tg.initDataUnsafe.user.first_name || '',
        }));
      }
      
      setLoading(false);
    } else {
      // Fallback for development environment (non-Telegram)
      setLoading(false);
    }
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500));
      setResponse({
        status: 'success',
        data: `Hello, ${formData.name}! Your message has been sent successfully.`,
      });
    } catch (error) {
      setResponse({
        status: 'error',
        data: 'Something went wrong. Please try again.',
      });
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <TmaLoader />;
  }

  return (
    <div className="min-h-screen">
      <div className="bg-tg-bg border-b border-tg-border">
        <div className="max-w-md mx-auto px-4 py-4 flex items-center gap-3">
          {user ? (
            <>
              <div className="w-10 h-10 rounded-full bg-tg-secondary text-white flex items-center justify-center font-bold text-lg">
                {user.first_name?.[0]}
              </div>
              <div className="flex flex-col">
                <span className="text-sm font-bold text-tg-text">{user.first_name} {user.last_name}</span>
                <span className="text-xs text-tg-textSecondary">@{user.username || 'User'}</span>
              </div>
            </>
          ) : (
            <div className="flex flex-col">
              <span className="text-sm font-bold text-tg-text">Guest User</span>
            </div>
          )}
        </div>
      </div>

      <div className="p-4">
        <TmaCard title="User Profile" description="View your Telegram account details">
          {user ? (
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div className="bg-gray-50 p-3 rounded-lg">
                <span className="text-tg-textSecondary block text-xs">ID</span>
                <span className="font-medium text-tg-text">{user.id}</span>
              </div>
              <div className="bg-gray-50 p-3 rounded-lg">
                <span className="text-tg-textSecondary block text-xs">Language</span>
                <span className="font-medium text-tg-text">{user.language_code || 'N/A'}</span>
              </div>
            </div>
          ) : (
            <p className="text-sm text-tg-textSecondary">Not logged in via Telegram.</p>
          )}
        </TmaCard>

        <TmaCard title="Send Message" description="Interact with the bot">
          <form onSubmit={handleSubmit} className="space-y-4">
            <TmaInput
              label="Name"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              placeholder="Enter your name"
              type="text"
            />
            <TmaInput
              label="Message"
              name="message"
              value={formData.message}
              onChange={handleInputChange}
              placeholder="Type your message here..."
              type="text"
            />
            <TmaButton 
              text="Send Message" 
              loading={loading} 
              disabled={loading}
            />
          </form>
        </TmaCard>

        {response && (
          <TmaCard title="Response">
            <div className={`p-3 rounded-lg text-sm ${
              response.status === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
            }`}>
              {response.data}
            </div>
          </TmaCard>
        )}
      </div>
    </div>
  );
}