import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Hospital, 
  MapPin, 
  PhoneCall, 
  Mail, 
  Award, 
  Plus, 
  Settings, 
  ShieldCheck, 
  User, 
  ChevronRight,
  Search,
  Building2,
  Trash2,
  Edit2
} from 'lucide-react';

export const ReferralsSetup: React.FC = () => {
  const [isAddOpen, setIsAddOpen] = useState(false);

  const referrals = [
    { id: 'REF-01', name: 'Narayana Health City', type: 'Tertiary Care', specialty: 'CARDIAC, ONCOLOGY', contact: 'Dr. Vikram - 9845011223', address: 'Hosur Road, Bangalore', status: 'ACTIVE' },
    { id: 'REF-02', name: 'St. Johns Medical College', type: 'Teaching Hospital', specialty: 'TRAUMA, PEDIATRICS', contact: 'Coordinator Ravi - 9845099881', address: 'Koramangala, Bangalore', status: 'ACTIVE' },
    { id: 'REF-03', name: 'Nimhans', type: 'Psychiatric/Neuro', specialty: 'NEUROLOGY, NEUROSURGERY', contact: 'ER Helpdesk - 080-26995000', address: 'Hosur Road, Bangalore', status: 'ACTIVE' },
  ];

  return (
    <motion.div 
      initial={{ opacity: 0, scale: 0.98 }}
      animate={{ opacity: 1, scale: 1 }}
      className="module-content"
    >
      <div className="module-header-modern">
        <div className="title-wrap">
          <h3>REFERRAL HOSPITAL NETWORK</h3>
          <div className="live-pill">
            <span className="pulse" /> {referrals.length} TRUSTED PARTNERS
          </div>
        </div>
        <div className="action-area-header">
          <button className="register-staff-btn-premium" onClick={() => setIsAddOpen(true)}>
            <Plus size={18} />
            <span>ADD REFERRAL NODE</span>
          </button>
        </div>
      </div>

      <div className="referral-grid-layout">
        <div className="referral-list-main">
          {referrals.map(ref => (
            <div key={ref.id} className="referral-node-card">
              <div className="node-icon-bubble">
                <Building2 size={24} />
              </div>
              <div className="node-info-content">
                <div className="node-top-row">
                  <div className="node-title-stack">
                    <h4>{ref.name}</h4>
                    <span className="node-type">{ref.type}</span>
                  </div>
                  <div className="node-badge-active">PARTNERED</div>
                </div>
                <div className="node-details-grid">
                  <div className="d-item">
                    <Award size={14} />
                    <span>Specialties: {ref.specialty}</span>
                  </div>
                  <div className="d-item">
                    <MapPin size={14} />
                    <span>{ref.address}</span>
                  </div>
                  <div className="d-item">
                    <PhoneCall size={14} />
                    <span>{ref.contact}</span>
                  </div>
                </div>
                <div className="node-footer-actions">
                  <button className="node-action"><Edit2 size={14} /> Configure Notifications</button>
                  <button className="node-action-danger"><Trash2 size={14} /> Remove Node</button>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="referral-settings-side">
          <div className="side-card-premium">
            <div className="card-header-mini">
              <Settings size={16} />
              <h4>Global Referral Preferences</h4>
            </div>
            <div className="setting-control-row">
              <div className="setting-info">
                <strong>Auto-Pre-Alert</strong>
                <span>Notify referral hub immediately on booking</span>
              </div>
              <input type="checkbox" defaultChecked />
            </div>
            <div className="setting-control-row">
              <div className="setting-info">
                <strong>Mortuary Referral</strong>
                <span>Enable deceased-outcome routing logic</span>
              </div>
              <input type="checkbox" defaultChecked />
            </div>
          </div>

          <div className="side-card-premium dark-accent">
            <ShieldCheck size={32} style={{ opacity: 0.5, marginBottom: '16px' }} />
            <h4>Protocol Compliance</h4>
            <p style={{ fontSize: '0.8rem', opacity: 0.8, lineHeight: 1.5 }}>
              All outgoing referrals are logged and linked to active ePCR data for legal handoff audit.
            </p>
          </div>
        </div>
      </div>
    </motion.div>
  );
};
