import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Database, 
  Search, 
  Calendar, 
  TrendingUp, 
  Clock, 
  FileText, 
  User, 
  Activity, 
  MapPin, 
  ChevronRight,
  Filter,
  CheckCircle2,
  Video
} from 'lucide-react';

export const PatientArchive: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'LIST' | 'TIMELINE'>('LIST');

  const archive = [
    { id: 'INC-9012', date: '2026-05-04', name: 'Rajit Bose', age: 52, gender: 'M', triage: 'RED', category: 'CARDIAC', outcome: 'DISCHARGED', ambulance: 'ALS-02', teleLink: true },
    { id: 'INC-8955', date: '2026-05-03', name: 'Sana Khan', age: 24, gender: 'F', triage: 'YELLOW', category: 'TRAUMA', outcome: 'ADMITTED', ambulance: 'BLS-09', teleLink: false },
    { id: 'INC-8940', date: '2026-05-03', name: 'Unknown Male', age: 0, gender: 'M', triage: 'RED', category: 'STROKE', outcome: 'DECEASED', ambulance: 'ALS-01', teleLink: true },
  ];

  return (
    <motion.div 
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="module-content"
    >
      <div className="module-header-modern">
        <div className="title-wrap">
          <h3>PATIENT & INCIDENT HISTORY</h3>
          <div className="live-pill">
            <span className="pulse" /> COMPREHENSIVE CARE RECORDS
          </div>
        </div>
        <div className="action-area-header">
          <div className="date-picker-mini">
            <Calendar size={14} />
            <span>LAST 30 DAYS</span>
          </div>
          <div className="search-mini">
            <Search size={14} />
            <input type="text" placeholder="Search by ID, Name, MRN..." />
          </div>
          <button className="register-staff-btn-premium">
            <Filter size={18} />
          </button>
        </div>
      </div>

      <div className="archive-grid">
        <div className="archive-list-panel">
          <table className="staff-table-premium">
            <thead>
              <tr>
                <th>Patient ID & Date</th>
                <th>Category</th>
                <th>Provider Details</th>
                <th>Outcome</th>
                <th>History</th>
              </tr>
            </thead>
            <tbody>
              {archive.map(p => (
                <tr key={p.id} className="archive-row-hover">
                  <td>
                    <div className="patient-main-ident">
                      <strong>{p.name}</strong>
                      <span>{p.id} · {p.date}</span>
                    </div>
                  </td>
                  <td>
                    <div className="cat-badge-wrap">
                      <span className={`cat-pill cat-${p.category.toLowerCase()}`}>{p.category}</span>
                      <span className={`triage-tag triage-${p.triage.toLowerCase()}`}>{p.triage}</span>
                    </div>
                  </td>
                  <td>
                    <div className="amb-emt-meta">
                      <span>{p.ambulance}</span>
                      {p.teleLink && <Video size={10} style={{ color: 'var(--accent-cyan)' }} />}
                    </div>
                  </td>
                  <td>
                    <span className={`outcome-pill outcome-${p.outcome.toLowerCase()}`}>{p.outcome}</span>
                  </td>
                  <td>
                    <button className="tag-btn"><ChevronRight size={14} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="archive-metrics-side">
          <div className="side-metric-card">
            <h4>Outcome Distribution</h4>
            <div className="metric-bar-chart">
              {/* Simple Mock Bars */}
              <div className="bar-row">
                <span>Admitted</span>
                <div className="bar-container"><div className="bar-val" style={{ width: '65%', background: 'var(--accent-cyan)' }} /></div>
                <span className="perc">65%</span>
              </div>
              <div className="bar-row">
                <span>Discharged</span>
                <div className="bar-container"><div className="bar-val" style={{ width: '25%', background: 'var(--accent-green)' }} /></div>
                <span className="perc">25%</span>
              </div>
              <div className="bar-row">
                <span>Referred</span>
                <div className="bar-container"><div className="bar-val" style={{ width: '10%', background: 'var(--warning-amber)' }} /></div>
                <span className="perc">10%</span>
              </div>
            </div>
          </div>

          <div className="side-metric-card">
            <h4>Timeline Insight (Scene to ED)</h4>
            <div className="avg-time-display">
              <Clock size={24} style={{ color: 'var(--accent-cyan)' }} />
              <div className="time-val">28.4 <small>min</small></div>
              <span className="trend down">▼ 2m vs Last Month</span>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
};