import React, { useEffect, useState } from 'react';
import { base44 } from '@/api/base44Client';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Shield, Calendar, Briefcase, LogOut, Activity as ActivityIcon } from 'lucide-react';

const EVENT_LABELS = {
  signup: 'Signed up',
  login: 'Logged in',
  logout: 'Logged out',
  create_position: 'Created a position',
  screen_candidate: 'Screened a candidate',
  hire_candidate: 'Hired a candidate',
  apply_job: 'Applied for a job',
  start_interview: 'Started an interview',
};

export default function Profile() {
  const [user, setUser] = useState(null);
  const [activities, setActivities] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        const me = await base44.auth.me();
        setUser(me);
        const acts = await base44.entities.UserActivity.filter(
          { user_email: me.email },
          '-created_date',
          20
        );
        setActivities(acts);
      } catch {}
      setLoading(false);
    })();
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <div className="w-8 h-8 border-4 border-slate-200 border-t-[#0838E0] rounded-full animate-spin" />
      </div>
    );
  }

  if (!user) {
    return <div className="text-center py-20 text-[#6B7280]">Unable to load profile.</div>;
  }

  const initials = (user.full_name || user.email || 'U')
    .split(' ')
    .map((p) => p[0])
    .join('')
    .slice(0, 2)
    .toUpperCase();

  return (
    <div className="max-w-3xl mx-auto">
      {/* Profile header */}
      <div className="flex items-center gap-4 mb-8">
        <div className="w-20 h-20 rounded-full bg-[#0838E0] flex items-center justify-center text-white text-2xl font-bold">
          {initials}
        </div>
        <div>
          <h1 className="text-2xl font-bold text-[#111827]">{user.full_name || 'User'}</h1>
          <p className="text-[#6B7280]">{user.email}</p>
        </div>
      </div>

      {/* Info grid */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <Card className="p-4">
          <div className="flex items-center gap-2 text-[#6B7280] text-xs font-medium uppercase mb-1">
            <Shield className="w-3.5 h-3.5" /> Role
          </div>
          <div className="text-[#111827] font-semibold capitalize">{user.role || 'user'}</div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2 text-[#6B7280] text-xs font-medium uppercase mb-1">
            <Briefcase className="w-3.5 h-3.5" /> Account Type
          </div>
          <div className="text-[#111827] font-semibold capitalize">{user.account_type || 'applicant'}</div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2 text-[#6B7280] text-xs font-medium uppercase mb-1">
            <Calendar className="w-3.5 h-3.5" /> Member Since
          </div>
          <div className="text-[#111827] font-semibold">
            {user.created_date ? new Date(user.created_date).toLocaleDateString() : '—'}
          </div>
        </Card>
      </div>

      {/* Recent activity */}
      <div className="mb-8">
        <h2 className="text-sm font-semibold text-[#374151] uppercase mb-3 flex items-center gap-2">
          <ActivityIcon className="w-4 h-4" /> Recent Activity
        </h2>
        {activities.length === 0 ? (
          <p className="text-[#9CA3AF] text-sm">No recent activity.</p>
        ) : (
          <div className="space-y-1">
            {activities.map((a) => (
              <div key={a.id} className="flex items-center justify-between py-2.5 border-b border-[#F3F4F6]">
                <div>
                  <span className="text-[#111827] text-sm font-medium">{EVENT_LABELS[a.event_type] || a.event_type}</span>
                  {a.details && <span className="text-[#9CA3AF] text-xs ml-2">{a.details}</span>}
                </div>
                <span className="text-[#9CA3AF] text-xs whitespace-nowrap ml-4">
                  {a.created_date ? new Date(a.created_date).toLocaleString() : ''}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Logout */}
      <Button
        onClick={() => base44.auth.logout('/')}
        variant="outline"
        className="text-red-600 border-red-200 hover:bg-red-50 hover:text-red-700"
      >
        <LogOut className="w-4 h-4 mr-2" />
        Log out
      </Button>
    </div>
  );
}