import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { User, Mail, Calendar, ShoppingBag, Wrench, LogOut, Package, Settings } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Separator } from '../components/ui/separator';
import { Badge } from '../components/ui/badge';
import { useAuth } from '../context/AuthContext';

const Profile = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  if (!user) {
    return (
      <div className="min-h-screen py-12 md:py-16">
        <div className="max-w-4xl mx-auto px-4 md:px-8 text-center py-16">
          <h2 className="text-2xl font-bold mb-4 font-['Outfit']">Please Sign In</h2>
          <p className="text-muted-foreground mb-8">
            You need to be logged in to view your profile
          </p>
          <Button onClick={() => navigate('/login')} className="rounded-full">
            Sign In
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen py-12 md:py-16">
      <div className="max-w-4xl mx-auto px-4 md:px-8">
        <h1 className="text-3xl font-bold font-['Outfit'] mb-8">My Profile</h1>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Profile Card */}
          <div className="md:col-span-1">
            <div className="border border-border rounded-2xl bg-card p-6 text-center">
              <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
                <User className="h-10 w-10 text-primary" />
              </div>
              <h2 className="text-xl font-semibold font-['Outfit'] mb-1" data-testid="profile-name">
                {user.name}
              </h2>
              <p className="text-sm text-muted-foreground mb-2" data-testid="profile-email">
                {user.email}
              </p>
              {user.role === 'admin' && (
                <Badge className="mb-4">Admin</Badge>
              )}
              <Button 
                variant="outline" 
                className="w-full rounded-full gap-2 mt-4"
                onClick={handleLogout}
                data-testid="profile-logout"
              >
                <LogOut className="h-4 w-4" />
                Sign Out
              </Button>
            </div>
          </div>

          {/* Details */}
          <div className="md:col-span-2 space-y-6">
            {/* Account Info */}
            <div className="border border-border rounded-2xl bg-card p-6">
              <h3 className="text-lg font-semibold font-['Outfit'] mb-4">Account Information</h3>
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
                    <User className="h-5 w-5 text-muted-foreground" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Full Name</p>
                    <p className="font-medium">{user.name}</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
                    <Mail className="h-5 w-5 text-muted-foreground" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Email Address</p>
                    <p className="font-medium">{user.email}</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
                    <Calendar className="h-5 w-5 text-muted-foreground" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Account Type</p>
                    <p className="font-medium capitalize">{user.role || 'Customer'}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Quick Links */}
            <div className="border border-border rounded-2xl bg-card p-6">
              <h3 className="text-lg font-semibold font-['Outfit'] mb-4">Quick Links</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Button 
                  variant="outline" 
                  className="justify-start gap-3 h-auto py-4 rounded-xl"
                  onClick={() => navigate('/orders')}
                  data-testid="profile-view-orders"
                >
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <Package className="h-5 w-5 text-primary" />
                  </div>
                  <div className="text-left">
                    <p className="font-medium">Order History</p>
                    <p className="text-xs text-muted-foreground">View your past orders</p>
                  </div>
                </Button>
                <Button 
                  variant="outline" 
                  className="justify-start gap-3 h-auto py-4 rounded-xl"
                  onClick={() => navigate('/cart')}
                  data-testid="profile-view-cart"
                >
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <ShoppingBag className="h-5 w-5 text-primary" />
                  </div>
                  <div className="text-left">
                    <p className="font-medium">Shopping Cart</p>
                    <p className="text-xs text-muted-foreground">View your cart items</p>
                  </div>
                </Button>
                <Button 
                  variant="outline" 
                  className="justify-start gap-3 h-auto py-4 rounded-xl"
                  onClick={() => navigate('/services')}
                  data-testid="profile-book-service"
                >
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <Wrench className="h-5 w-5 text-primary" />
                  </div>
                  <div className="text-left">
                    <p className="font-medium">Book a Service</p>
                    <p className="text-xs text-muted-foreground">Schedule a repair</p>
                  </div>
                </Button>
                {user.role === 'admin' && (
                  <Button 
                    variant="outline" 
                    className="justify-start gap-3 h-auto py-4 rounded-xl border-primary/50"
                    onClick={() => navigate('/admin')}
                    data-testid="profile-admin-dashboard"
                  >
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <Settings className="h-5 w-5 text-primary" />
                    </div>
                    <div className="text-left">
                      <p className="font-medium">Admin Dashboard</p>
                      <p className="text-xs text-muted-foreground">Manage store</p>
                    </div>
                  </Button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;
