import { useState, useEffect } from 'react'
import { Button } from "/components/ui/button"
import { Input } from "/components/ui/input"
import { Label } from "/components/ui/label"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "/components/ui/card"
import { Home, Settings, Bell, Phone as PhoneIcon, User, Mail, Trash2, Edit2, CreditCard, Plus } from "lucide-react"

// Main App Component
export default function PhonebookApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [username, setUsername] = useState('')

  const handleLogin = (user: string) => {
    setUsername(user)
    setIsLoggedIn(true)
  }

  const handleLogout = () => {
    setIsLoggedIn(false)
    setUsername('')
  }

  if (!isLoggedIn) {
    return <LoginPage onLogin={handleLogin} />
  }

  return <Dashboard username={username} onLogout={handleLogout} />
}

// Login Page Component
function LoginPage({ onLogin }: { onLogin: (username: string) => void }) {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  })
  const [errors, setErrors] = useState({
    username: '',
    password: ''
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.username) {
      setErrors({ ...errors, username: 'Username is required' })
      return
    }
    if (!formData.password) {
      setErrors({ ...errors, password: 'Password is required' })
      return
    }
    onLogin(formData.username)
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl text-center">Login</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input
                id="username"
                name="username"
                value={formData.username}
                onChange={(e) => setFormData({...formData, username: e.target.value})}
                className={errors.username ? 'border-red-500' : ''}
              />
              {errors.username && <p className="text-red-500 text-sm">{errors.username}</p>}
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                name="password"
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({...formData, password: e.target.value})}
                className={errors.password ? 'border-red-500' : ''}
              />
              {errors.password && <p className="text-red-500 text-sm">{errors.password}</p>}
            </div>
            <Button type="submit" className="w-full">Login</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

// Dashboard Component
function Dashboard({ username, onLogout }: { username: string; onLogout: () => void }) {
  const [activeTab, setActiveTab] = useState('phonebook')
  const [credits, setCredits] = useState(10)
  const [contacts, setContacts] = useState<Contact[]>([])
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    // Sample contacts
    setContacts([
      {
        id: '1',
        name: 'John Doe',
        phone: '+1 (555) 123-4567',
        email: 'john@example.com'
      },
      {
        id: '2',
        name: 'Jane Smith',
        phone: '+1 (555) 987-6543',
        email: 'jane@example.com'
      }
    ])
  }, [])

  const handleCall = (phone: string) => {
    if (credits <= 0) {
      alert('Not enough credits!')
      setActiveTab('topup')
      return
    }
    setCredits(credits - 1)
    alert(`Calling ${phone}...`)
  }

  const handleTopUp = (amount: number) => {
    setCredits(credits + amount)
    alert(`Added ${amount} credits!`)
  }

  return (
    <div className="min-h-screen flex bg-gray-50">
      {/* Sidebar */}
      <div className="w-64 bg-white shadow-md p-4">
        <div className="mb-6">
          <h1 className="text-xl font-bold">Phonebook</h1>
          <p className="text-sm">Welcome, {username}</p>
          <div className="mt-2 bg-blue-50 p-2 rounded">
            <p className="text-sm font-medium">Credits: {credits}</p>
          </div>
        </div>
        
        <nav className="space-y-1">
          <Button 
            variant={activeTab === 'phonebook' ? 'default' : 'ghost'} 
            className="w-full justify-start"
            onClick={() => setActiveTab('phonebook')}
          >
            <User className="w-4 h-4 mr-2" />
            Phonebook
          </Button>
          <Button 
            variant={activeTab === 'topup' ? 'default' : 'ghost'} 
            className="w-full justify-start"
            onClick={() => setActiveTab('topup')}
          >
            <CreditCard className="w-4 h-4 mr-2" />
            Top Up
          </Button>
          <Button 
            variant="ghost" 
            className="w-full justify-start text-red-500 hover:text-red-600"
            onClick={onLogout}
          >
            Logout
          </Button>
        </nav>
      </div>

      {/* Main Content */}
      <div className="flex-1 p-6">
        {activeTab === 'phonebook' && (
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-bold">Contacts</h2>
              <Button>
                <Plus className="w-4 h-4 mr-2" />
                Add Contact
              </Button>
            </div>
            
            <Input 
              placeholder="Search contacts..." 
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
            
            <div className="space-y-2">
              {contacts.filter(c => 
                c.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
                c.phone.includes(searchTerm)
              ).map(contact => (
                <Card key={contact.id}>
                  <CardContent className="p-4 flex justify-between items-center">
                    <div>
                      <h3 className="font-medium">{contact.name}</h3>
                      <p className="text-sm text-gray-600">{contact.phone}</p>
                    </div>
                    <Button 
                      size="sm" 
                      onClick={() => handleCall(contact.phone)}
                    >
                      <PhoneIcon className="w-4 h-4" />
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

        {activeTab === 'topup' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold">Top Up Credits</h2>
            
            <Card>
              <CardContent className="p-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {[5, 10, 20].map(amount => (
                    <Card key={amount} className="text-center p-4 cursor-pointer hover:bg-gray-50">
                      <h3 className="font-medium">{amount} Credits</h3>
                      <p className="text-2xl font-bold my-2">${amount}</p>
                      <Button onClick={() => handleTopUp(amount)}>
                        Buy Now
                      </Button>
                    </Card>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        )}
      </div>
    </div>
  )
}

interface Contact {
  id: string
  name: string
  phone: string
  email: string
}