import React, { useState } from 'react';
import { 
  Scale, FileText, Calendar, Users, BookOpen, 
  Mail, Phone, Building2, FileSignature, 
  Gavel, DollarSign, Clock, AlertCircle 
} from 'lucide-react';

const DevonAttorneyInterface = () => {
  const [activeTab, setActiveTab] = useState('dashboard');

  return (
    <div className="flex h-screen bg-slate-900">
      {/* Primary Navigation */}
      <div className="w-20 bg-slate-800 p-4 flex flex-col items-center space-y-6">
        <div className="h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center">
          <Scale className="text-white" size={24} />
        </div>
        
        <nav className="flex flex-col space-y-4">
          <NavButton icon={<Building2 />} label="Practice" />
          <NavButton icon={<FileText />} label="Cases" />
          <NavButton icon={<Calendar />} label="Calendar" />
          <NavButton icon={<Users />} label="Clients" />
          <NavButton icon={<BookOpen />} label="Legal Research" />
          <NavButton icon={<FileSignature />} label="Documents" />
          <NavButton icon={<Gavel />} label="Court" />
          <NavButton icon={<DollarSign />} label="Billing" />
        </nav>
      </div>

      {/* Main Content Area */}
      <div className="flex-1 flex flex-col">
        {/* Top Bar with Quick Actions */}
        <div className="h-16 bg-slate-800 flex items-center justify-between px-6">
          <h1 className="text-white text-xl font-semibold">Devon Law Practice</h1>
          <div className="flex items-center space-x-4">
            <QuickAction icon={<Mail />} count={3} label="Messages" />
            <QuickAction icon={<AlertCircle />} count={2} label="Urgent" />
            <QuickAction icon={<Clock />} count={5} label="Deadlines" />
          </div>
        </div>

        {/* Dynamic Content Area */}
        <div className="flex-1 bg-slate-900 p-6 overflow-y-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Active Cases Overview */}
            <CaseCard 
              title="State v. Johnson"
              type="Criminal Defense"
              status="Trial Prep"
              nextEvent="Motion Hearing"
              date="2024-02-15"
              priority="High"
              updates={[
                "New evidence filed by prosecution",
                "Witness interviews scheduled",
                "Motion to suppress drafted"
              ]}
            />

            {/* Client Meetings */}
            <AppointmentCard 
              title="Client Consultations"
              appointments={[
                {
                  client: "Sarah Miller",
                  time: "10:30 AM",
                  type: "Initial Consultation"
                },
                {
                  client: "Robert Chen",
                  time: "2:00 PM",
                  type: "Case Review"
                }
              ]}
            />

            {/* Court Appearances */}
            <CourtCard 
              title="Upcoming Court"
              appearances={[
                {
                  case: "Thompson v. State",
                  court: "District Court",
                  time: "9:00 AM",
                  judge: "Hon. Martinez"
                },
                {
                  case: "Corporate Merger Review",
                  court: "Chancery",
                  time: "11:30 AM",
                  judge: "Hon. Wilson"
                }
              ]}
            />

            {/* Document Drafting */}
            <DocumentCard 
              title="Active Documents"
              documents={[
                {
                  name: "Motion to Dismiss",
                  case: "Peters Case",
                  deadline: "Tomorrow",
                  status: "In Progress"
                },
                {
                  name: "Settlement Agreement",
                  case: "Corporate Merger",
                  deadline: "This Week",
                  status: "Review Needed"
                }
              ]}
            />

            {/* Legal Strategy */}
            <StrategyCard 
              title="Case Strategy"
              case="Johnson Defense"
              keyPoints={[
                "Challenge evidence chain of custody",
                "Prepare expert witness",
                "File motion to suppress"
              ]}
              nextSteps={[
                "Complete witness interviews",
                "Draft motion response",
                "Prepare client for testimony"
              ]}
            />

            {/* Billing Status */}
            <BillingCard 
              title="Billing Overview"
              entries={[
                {
                  case: "Johnson Defense",
                  hours: 12.5,
                  status: "To Be Billed"
                },
                {
                  case: "Corporate Merger",
                  hours: 8.0,
                  status: "Ready for Review"
                }
              ]}
            />
          </div>
        </div>
      </div>

      {/* Context Sidebar - Dynamic based on selected item */}
      <div className="w-80 bg-slate-800 p-4">
        <h2 className="text-white text-lg font-semibold mb-4">Details</h2>
        {/* Dynamic content based on selection */}
      </div>
    </div>
  );
};

const NavButton = ({ icon, label }) => (
  <button className="p-3 rounded-lg bg-slate-700 hover:bg-blue-600 transition-colors">
    <div className="text-white">{icon}</div>
  </button>
);

const QuickAction = ({ icon, count, label }) => (
  <button className="flex items-center space-x-2 p-2 rounded-lg bg-slate-700 hover:bg-blue-600">
    <div className="text-white">{icon}</div>
    {count > 0 && (
      <span className="bg-red-500 text-white text-xs rounded-full px-2 py-1">
        {count}
      </span>
    )}
  </button>
);

const CaseCard = ({ title, type, status, nextEvent, date, priority, updates }) => (
  <div className="bg-slate-800 rounded-lg p-4">
    <h3 className="text-white font-semibold mb-2">{title}</h3>
    <div className="space-y-2">
      <p className="text-slate-300">{type}</p>
      <p className="text-slate-300">Status: {status}</p>
      <div className="border-t border-slate-700 my-2 pt-2">
        <p className="text-slate-300">Next: {nextEvent}</p>
        <p className="text-slate-300">Date: {date}</p>
      </div>
      <div className="space-y-1">
        {updates.map((update, index) => (
          <p key={index} className="text-sm text-slate-400">• {update}</p>
        ))}
      </div>
    </div>
  </div>
);

// Similar component definitions for AppointmentCard, CourtCard, 
// DocumentCard, StrategyCard, and BillingCard would follow...

export default DevonAttorneyInterface;