'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { 
  User, 
  Phone, 
  Mail, 
  LogOut, 
  UtensilsCrossed, 
  Car, 
  ShieldCheck, 
  ExternalLink,
  ShoppingBag,
  Navigation,
  Clock,
  Heart
} from 'lucide-react';
import { toast } from 'sonner';
import { authApi } from '@/lib/api';
import { getPlatformToken, clearPlatformSession } from '@/lib/auth';

export default function ProfilePage() {
  const router = useRouter();
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = getPlatformToken();
    if (!token) {
      router.push('/login?redirect=/profile');
      return;
    }

    authApi.getProfile()
      .then((res) => {
        if (res?.data) {
          setUser(res.data);
        } else if (res) {
          setUser(res);
        }
      })
      .catch((err) => {
        console.error('Error fetching profile:', err);
      })
      .finally(() => setLoading(false));
  }, [router]);

  const handleLogout = async () => {
    await authApi.logout();
    clearPlatformSession();
    toast.success('Successfully logged out');
    router.push('/');
  };

  return (
    <div className="relative min-h-[85vh] py-12 px-4 sm:px-6 lg:px-8 bg-white bg-map-pattern text-neutral-900">
      <div className="mx-auto max-w-4xl space-y-8">
        
        {/* Profile Card matching ReadyCab */}
        <div className="rounded-3xl border border-neutral-200 bg-white p-8 shadow-md">
          <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
            
            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-black text-white shadow-md text-2xl font-black">
              {user?.name?.[0]?.toUpperCase() || user?.first_name?.[0]?.toUpperCase() || 'U'}
            </div>

            <div className="flex-1 text-center sm:text-left space-y-2">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <h1 className="text-2xl font-bold text-black">
                    {user?.name || `${user?.first_name || ''} ${user?.last_name || ''}`.trim() || 'Valued Customer'}
                  </h1>
                  <p className="text-xs text-neutral-500">
                    Unified Account &bull; Single Sign-On Active
                  </p>
                </div>

                <button
                  onClick={handleLogout}
                  className="inline-flex items-center justify-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-4 py-2 text-xs font-semibold text-neutral-700 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition"
                >
                  <LogOut className="h-3.5 w-3.5" />
                  Sign Out
                </button>
              </div>

              <div className="flex flex-wrap items-center justify-center sm:justify-start gap-3 pt-4 text-xs text-neutral-600">
                {user?.phone && (
                  <div className="flex items-center gap-1.5 rounded-full bg-neutral-100 px-3.5 py-1.5 border border-neutral-200">
                    <Phone className="h-3.5 w-3.5 text-neutral-500" />
                    <span>{user.country_code ? `${user.country_code} ` : ''}{user.phone}</span>
                  </div>
                )}
                {user?.email && (
                  <div className="flex items-center gap-1.5 rounded-full bg-neutral-100 px-3.5 py-1.5 border border-neutral-200">
                    <Mail className="h-3.5 w-3.5 text-neutral-500" />
                    <span>{user.email}</span>
                  </div>
                )}
                <div className="flex items-center gap-1.5 rounded-full bg-emerald-50 border border-emerald-200 px-3.5 py-1.5 text-emerald-700 font-medium">
                  <ShieldCheck className="h-3.5 w-3.5" />
                  <span>Verified Session</span>
                </div>
              </div>
            </div>

          </div>
        </div>

        {/* Cross-Service Activity Hub */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          
          {/* 🍔 Food Delivery Actions */}
          <div className="rounded-3xl border border-neutral-200 bg-white p-6 shadow-sm">
            <div className="flex items-center gap-3 mb-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100 text-black border border-neutral-200">
                <UtensilsCrossed className="h-5 w-5" />
              </div>
              <div>
                <h3 className="text-base font-bold text-black">Food Delivery Activity</h3>
                <p className="text-xs text-neutral-500">ReadyEats orders and favorites</p>
              </div>
            </div>

            <div className="space-y-2.5">
              <a
                href="/food/myorders"
                className="flex items-center justify-between p-3.5 rounded-xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 text-xs font-semibold text-neutral-800 transition"
              >
                <div className="flex items-center gap-3">
                  <ShoppingBag className="h-4 w-4 text-black" />
                  <span>Past & Active Orders</span>
                </div>
                <ExternalLink className="h-3.5 w-3.5 text-neutral-400" />
              </a>

              <a
                href="/food/favourite"
                className="flex items-center justify-between p-3.5 rounded-xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 text-xs font-semibold text-neutral-800 transition"
              >
                <div className="flex items-center gap-3">
                  <Heart className="h-4 w-4 text-black" />
                  <span>Saved Restaurants & Dishes</span>
                </div>
                <ExternalLink className="h-3.5 w-3.5 text-neutral-400" />
              </a>
            </div>
          </div>

          {/* 🚕 Cab Booking Actions */}
          <div className="rounded-3xl border border-neutral-200 bg-white p-6 shadow-sm">
            <div className="flex items-center gap-3 mb-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100 text-black border border-neutral-200">
                <Car className="h-5 w-5" />
              </div>
              <div>
                <h3 className="text-base font-bold text-black">Cab & Ride Activity</h3>
                <p className="text-xs text-neutral-500">ReadyCab trips and settings</p>
              </div>
            </div>

            <div className="space-y-2.5">
              <a
                href="/cab/trips"
                className="flex items-center justify-between p-3.5 rounded-xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 text-xs font-semibold text-neutral-800 transition"
              >
                <div className="flex items-center gap-3">
                  <Clock className="h-4 w-4 text-black" />
                  <span>Trip History & Receipts</span>
                </div>
                <ExternalLink className="h-3.5 w-3.5 text-neutral-400" />
              </a>

              <a
                href="/cab/addresses"
                className="flex items-center justify-between p-3.5 rounded-xl bg-neutral-50 hover:bg-neutral-100 border border-neutral-200/80 text-xs font-semibold text-neutral-800 transition"
              >
                <div className="flex items-center gap-3">
                  <Navigation className="h-4 w-4 text-black" />
                  <span>Saved Places & Home/Work</span>
                </div>
                <ExternalLink className="h-3.5 w-3.5 text-neutral-400" />
              </a>
            </div>
          </div>

        </div>

      </div>
    </div>
  );
}