import React, { useState } from 'react';
import { FaFileAlt, FaCheck, FaTimes } from 'react-icons/fa';
import { Card } from './shared/Card';

interface Case {
  id: string;
  type: string;
  clientName: string;
  description: string;
  status: 'new' | 'in_progress' | 'resolved' | 'rejected';
  createdAt: Date;
  documents: Document[];
}

interface Document {
  id: string;
  type: string;
  title: string;
  status: 'draft' | 'final';
  createdAt: Date;
}

interface DashboardStats {
  totalCases: number;
  activeCases: number;
  resolvedCases: number;
  successRate: number;
}

export function AdvocateDemo() {
  const [stats] = useState<DashboardStats>({
    totalCases: 150,
    activeCases: 45,
    resolvedCases: 105,
    successRate: 0.87,
  });

  const [cases] = useState<Case[]>([
    {
      id: '1',
      type: 'Tenant Rights',
      clientName: 'John Doe',
      description: 'Security deposit dispute with landlord',
      status: 'in_progress',
      createdAt: new Date(),
      documents: [
        {
          id: '1',
          type: 'Demand Letter',
          title: 'Security Deposit Return Demand',
          status: 'draft',
          createdAt: new Date(),
        },
      ],
    },
  ]);

  const [generatingDoc, setGeneratingDoc] = useState(false);

  const generateDocument = (caseId: string, docType: string) => {
    setGeneratingDoc(true);
    // Simulate document generation
    setTimeout(() => {
      setGeneratingDoc(false);
    }, 2000);
  };

  const updateCaseStatus = (caseId: string, newStatus: Case['status']) => {
    // In a real app, this would update the case status
    console.log(`Updating case ${caseId} to ${newStatus}`);
  };

  return (
    <div className="space-y-6">
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <div className="text-center">
            <h3 className="text-lg font-medium text-gray-900">Total Cases</h3>
            <p className="mt-2 text-3xl font-semibold text-blue-600">
              {stats.totalCases}
            </p>
          </div>
        </Card>
        <Card>
          <div className="text-center">
            <h3 className="text-lg font-medium text-gray-900">Active Cases</h3>
            <p className="mt-2 text-3xl font-semibold text-yellow-600">
              {stats.activeCases}
            </p>
          </div>
        </Card>
        <Card>
          <div className="text-center">
            <h3 className="text-lg font-medium text-gray-900">Resolved Cases</h3>
            <p className="mt-2 text-3xl font-semibold text-green-600">
              {stats.resolvedCases}
            </p>
          </div>
        </Card>
        <Card>
          <div className="text-center">
            <h3 className="text-lg font-medium text-gray-900">Success Rate</h3>
            <p className="mt-2 text-3xl font-semibold text-purple-600">
              {(stats.successRate * 100).toFixed(1)}%
            </p>
          </div>
        </Card>
      </div>

      <Card>
        <h2 className="mb-4 text-xl font-semibold">Active Cases</h2>
        <div className="space-y-4">
          {cases.map((case_) => (
            <div
              key={case_.id}
              className="rounded-lg border border-gray-200 p-4 shadow-sm"
            >
              <div className="mb-4 flex items-center justify-between">
                <div>
                  <h3 className="font-medium">{case_.type}</h3>
                  <p className="text-sm text-gray-600">
                    Client: {case_.clientName}
                  </p>
                  <p className="mt-1 text-sm text-gray-600">
                    {case_.description}
                  </p>
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={() => updateCaseStatus(case_.id, 'resolved')}
                    className="flex items-center gap-1 rounded-lg bg-green-500 px-3 py-1 text-sm text-white hover:bg-green-600"
                  >
                    <FaCheck />
                    Resolve
                  </button>
                  <button
                    onClick={() => updateCaseStatus(case_.id, 'rejected')}
                    className="flex items-center gap-1 rounded-lg bg-red-500 px-3 py-1 text-sm text-white hover:bg-red-600"
                  >
                    <FaTimes />
                    Reject
                  </button>
                </div>
              </div>

              <div>
                <h4 className="mb-2 font-medium">Documents</h4>
                <div className="space-y-2">
                  {case_.documents.map((doc) => (
                    <div
                      key={doc.id}
                      className="flex items-center justify-between rounded-lg border border-gray-200 p-2"
                    >
                      <div className="flex items-center gap-2">
                        <FaFileAlt className="text-gray-400" />
                        <div>
                          <p className="text-sm font-medium">{doc.title}</p>
                          <p className="text-xs text-gray-500">
                            Status: {doc.status}
                          </p>
                        </div>
                      </div>
                      <button
                        onClick={() => generateDocument(case_.id, doc.type)}
                        disabled={generatingDoc}
                        className="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600 disabled:opacity-50"
                      >
                        {generatingDoc ? 'Generating...' : 'Generate'}
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}