import React, { useState } from 'react';
import { Tabs, Tab, Box, Chip } from '@mui/material';
import { CheckCircle, Phone, ExpandMore } from '@mui/icons-material';
import { ChevronDown } from 'lucide-react';

const BlockedProfile = ({ profile }) => (
  <div className="bg-white border border-1 border-red-100 rounded-lg shadow-sm p-6 mb-4">
    <div className="flex items-start gap-4">
      <div className="relative flex-shrink-0">
        <img
          src={profile.image}
          alt={profile.name}
          className="w-32 h-32 rounded-2xl object-cover border-2 border-[#A70710]"
        />
        <button className="w-8 h-8 flex justify-center items-center absolute bottom-0 right-0 bg-[#A70710] text-white rounded-full shadow-lg">
          <Phone className="w-4 h-4" />
        </button>
      </div>
      
      <div className="flex-1">
        <div className="flex items-center gap-2 mb-1">
          <CheckCircle className="text-green-500 w-5 h-5" />
          <span className="text-green-500 font-medium">Verified</span>
        </div>
        
        <h2 className="text-2xl font-bold text-gray-900 mb-1">{profile.name}</h2>
        <p className="text-gray-500 text-sm mb-3">{profile.id} | Profile Created by Parent</p>
        
        <div className="space-y-1 text-gray-700">
          <p className="font-medium">{profile.age} yrs, {profile.height}, {profile.language},</p>
          <p className="font-medium">{profile.location},</p>
          <p className="font-medium">{profile.education}, {profile.occupation}, ₹ {profile.income}, {profile.state}, India</p>
        </div>
      </div>
    </div>
    
    <div className="mt-6 flex items-center justify-between border-t  border-[#A70710] pt-4">
      <p className="text-gray-600">You have blocked this profile</p>
      <button className="bg-[#A70710] hover:bg-red-600 text-white px-8 py-2 rounded-full font-medium transition-colors">
        UnBlock
      </button>
    </div>
  </div>
);

const ReportedProfile = ({ profile, onViewReason }) => {
  return (
    <div className="bg-white rounded-lg shadow-md p-4 mb-1 border border-1 border-red-100 hover:shadow-lg transition-shadow">
      <div className="flex flex-col sm:flex-row items-start gap-4">
        <div className='overflow-hidden w-[100%] h-[100%] max-w-50 max-h-45 rounded-lg flex-shrink-0'>
        <img
          src={profile.image}
          alt={profile.name}
          className="w-full h-full  object-cover "
        />
        </div>
        <div className="flex-1 w-full">
          <h3 className="text-lg font-bold text-gray-900 mb-1">{profile.name}</h3>
          <p className="text-sm text-gray-500 mb-2">
            ID : {profile.id} <span className="text-xs ml-1">Last seen {profile.lastSeen}</span>
          </p>
          
          <div className="space-y-1.5 text-sm">
            <div className="flex items-center gap-2 flex-wrap">
              <span className="text-gray-400">•</span>
              <span className="text-gray-600">Profile created by Parent</span>
              <span className="text-gray-400">•</span>
              <span className="text-gray-600">{profile.age} yrs</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-gray-400">•</span>
              <span className="text-gray-600">{profile.caste}</span>
            </div>
            <div className="flex items-center gap-2 flex-wrap">
              <span className="text-gray-400">•</span>
              <span className="text-gray-600">{profile.occupation}</span>
              <span className="text-gray-400">•</span>
              <span className="text-gray-600">{profile.location}</span>
            </div>
          </div>
          
          <button 
            onClick={() => onViewReason(profile)}
            className="flex items-center gap-1 text-red-500 hover:text-red-600 mt-3 text-sm font-medium transition-colors"
          >
            View Report Reason
            <ChevronDown className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
};

const ReportReasonModal = ({ profile, onClose }) => {
  if (!profile) return null;
  
  return (
    <div style={{backdropFilter:"blur(5px)"}} className="fixed inset-0 bg-[#0000006b] bg-opacity-50 flex items-center justify-center z-50 p-4 animate-fadeIn">
      <div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-6 animate-slideUp">
        <div className="flex items-start gap-4 mb-4">
          <img
            src={profile.image}
            alt={profile.name}
            className="w-16 h-20 rounded-lg object-cover flex-shrink-0"
          />
          <div>
            <h3 className="text-lg font-bold text-gray-900">{profile.name}</h3>
            <p className="text-sm text-gray-500">ID : {profile.id}</p>
          </div>
        </div>
        
        <div className="border-t pt-4">
          <h4 className="font-bold text-gray-900 mb-3">Reason For Report</h4>
          <p className="text-sm text-gray-600 leading-relaxed bg-gray-50 p-3 rounded-lg mb-4">
            {profile.reportReason}
          </p>
        </div>
        <div className='w-full flex justify-center'>

             <button
          onClick={onClose}
          className=" w-[fit-content] px-8 rounded-full bg-green-500 hover:bg-red-600 text-white py-2.5  font-medium transition-colors"
        >
          Close
        </button>
        </div>
       
      </div>
    </div>
  );
};


function BlockedProfileListPage() {
  const [activeTab, setActiveTab] = useState(0);
 const [selectedReport, setSelectedReport] = useState(null);
  const blockedProfiles = [
    {
      id: 'M6075010',
      name: 'Aravindh Vinayak M',
      age: 37,
      height: "5'6\"",
      language: 'Tamil',
      location: 'Karuneegar',
      education: 'BE',
      occupation: 'Clerk',
      income: '9 - 10 Lakhs',
      state: 'Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
    },
    {
      id: 'M6075010',
      name: 'Aravindh Vinayak M',
      age: 37,
      height: "5'6\"",
      language: 'Tamil',
      location: 'Karuneegar',
      education: 'BE',
      occupation: 'Clerk',
      income: '9 - 10 Lakhs',
      state: 'Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
    },
    {
      id: 'M6075010',
      name: 'Aravindh Vinayak M',
      age: 37,
      height: "5'6\"",
      language: 'Tamil',
      location: 'Karuneegar',
      education: 'BE',
      occupation: 'Clerk',
      income: '9 - 10 Lakhs',
      state: 'Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
    },
    {
      id: 'M6075010',
      name: 'Aravindh Vinayak M',
      age: 37,
      height: "5'6\"",
      language: 'Tamil',
      location: 'Karuneegar',
      education: 'BE',
      occupation: 'Clerk',
      income: '9 - 10 Lakhs',
      state: 'Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop'
    }
  ];

  const reportedProfiles = [
    {
      id: 'TK52586A',
      name: 'Pavilash . P',
      age: 23,
      lastSeen: 'Nov 25',
      caste: 'Agamudayar / Arcot / Thuluva vellala',
      occupation: 'Engineer-non – IT',
      location: 'Chennai',
      image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
      showReason: true,
      reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
    },
    {
      id: 'TK52586A',
      name: 'Pavilash . P',
      age: 23,
      lastSeen: 'Nov 25',
      caste: 'Agamudayar / Arcot / Thuluva vellala',
      occupation: 'Engineer-non – IT',
      location: 'Chennai',
      image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
      showReason: true,
      reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
    },
    {
      id: 'TK52586A',
      name: 'Pavilash . P',
      age: 23,
      lastSeen: 'Nov 25',
      caste: 'Agamudayar / Arcot / Thuluva vellala',
      occupation: 'Engineer-non – IT',
      location: 'Chennai',
      image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
      showReason: true,
      reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
    },
    {
      id: 'TK52586A',
      name: 'Pavilash . P',
      age: 23,
      lastSeen: 'Nov 25',
      caste: 'Agamudayar / Arcot / Thuluva vellala',
      occupation: 'Engineer-non – IT',
      location: 'Chennai',
      image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=400&fit=crop',
      showReason: true,
      reportReason: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
    }
  ];

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  return (
    <div className=" py-4 md:py-8">
      <div className="max-w-[1400px] mx-auto">
        <h1 className="text-center text-[24px] font-bold text-green-900 mb-6">Blocked & Reported Profiles</h1>
        
        <Box sx={{ mb: 3, width:"100%", maxWidth:"300px", marginRight:"auto", marginLeft:" auto" , marginBottom:"30px"}}>
          <Tabs 
            value={activeTab} 
            onChange={handleTabChange}
            sx={{
              '& .MuiTab-root': {
                textTransform: 'none',
                fontSize: '1rem',
                fontWeight: 600,
                minWidth: 120,
              },
              '& .Mui-selected': {
                color: '#fff !important',
                background:"#A70710"
              },
              '& .MuiTabs-indicator': {
                backgroundColor: '#A70710',
              },
            }}
          >
            <Tab label="Block List" />
            <Tab label="Reported List" />
          </Tabs>
        </Box>

        <div className="transition-all duration-300">
          {activeTab === 0 && (
            <div className='w-[100%] max-w-[1400px] mx-auto grid grid-cols-1 md:grid-cols-2 gap-2'>
              {blockedProfiles.map((profile, index) => (
                <BlockedProfile key={index} profile={profile} />
              ))}
            </div>
          )}
          
          {activeTab === 1 && (
            <div className='w-[100%] max-w-[1400px] mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-2'>
              {reportedProfiles.map((profile, index) => (
               <ReportedProfile 
                  key={index} 
                  profile={profile}
                  onViewReason={setSelectedReport}
                />
              ))}
            </div>

           
          )}

          
        </div>
          {/* Report Reason Modal */}
        <ReportReasonModal 
          profile={selectedReport}
          onClose={() => setSelectedReport(null)}
        />
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out;
        }
        .animate-slideUp {
          animation: slideUp 0.3s ease-out;
        }
      `}</style>
    </div>
  );
}

export default BlockedProfileListPage;