import React, { useState } from 'react';
import { ArrowLeft, Calendar, MapPin, Clock, Stethoscope, User, AlertCircle } from 'lucide-react';
import { Appointment, Patient } from '../types';

interface AppointmentsViewProps {
  appointments: Appointment[];
  onBack: () => void;
}

export const AppointmentsView: React.FC<AppointmentsViewProps> = ({
  appointments,
  onBack,
}) => {
  const [filterPatient, setFilterPatient] = useState<Patient>('tous');

  const filtered = appointments.filter((rdv) => {
    if (filterPatient === 'tous') return true;
    return rdv.patient === filterPatient;
  });

  return (
    <div className="flex flex-col gap-3">
      {/* Header */}
      <div className="flex items-center gap-3">
        <button
          onClick={onBack}
          className="w-11 h-11 rounded-xl bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center text-[var(--ink)] hover:bg-[var(--surface-alt)] transition-colors cursor-pointer"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div>
          <h1 className="text-xl sm:text-2xl font-bold text-[var(--ink)] m-0 leading-tight">
            Rendez-vous & Soignants
          </h1>
          <p className="text-xs text-[var(--ink-soft)] m-0">
            Passages infirmiers, kinésithérapie et visites médicales
          </p>
        </div>
      </div>

      {/* Onglets Filtres */}
      <div className="flex items-center gap-1.5 p-1 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)]">
        {(['tous', 'papa', 'maman'] as const).map((pat) => (
          <button
            key={pat}
            onClick={() => setFilterPatient(pat)}
            className={`flex-1 py-1.5 px-3 rounded-lg text-xs sm:text-sm font-semibold capitalize transition-colors cursor-pointer ${
              filterPatient === pat
                ? 'bg-[var(--surface)] text-[var(--ink)] shadow-sm'
                : 'text-[var(--ink-soft)] hover:text-[var(--ink)]'
            }`}
          >
            {pat === 'tous' ? 'Tous les RDV' : pat}
          </button>
        ))}
      </div>

      {/* Liste des rendez-vous */}
      <div className="flex flex-col gap-2.5 mt-1">
        {filtered.length === 0 ? (
          <div className="py-12 px-4 text-center rounded-2xl bg-[var(--surface)] border border-[var(--border)] text-[var(--ink-soft)] flex flex-col items-center justify-center gap-2">
            <Calendar className="w-10 h-10 text-[var(--ink-soft)]" />
            <p className="text-base font-semibold text-[var(--ink)] m-0">
              Aucun rendez-vous prévu dans cette catégorie
            </p>
          </div>
        ) : (
          filtered.map((rdv) => {
            const isRecurrent = rdv.type === 'recurrent';
            const isPapa = rdv.patient === 'papa';

            return (
              <div
                key={rdv.id}
                className="rounded-2xl p-4 bg-[var(--surface)] border border-[var(--border)] flex flex-col gap-2.5 shadow-sm"
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex items-center gap-2.5">
                    <div
                      className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${
                        isRecurrent
                          ? 'bg-emerald-950/60 text-emerald-300 border border-emerald-800'
                          : 'bg-blue-950/60 text-blue-300 border border-blue-800'
                      }`}
                    >
                      {isRecurrent ? (
                        <Stethoscope className="w-5 h-5" />
                      ) : (
                        <Calendar className="w-5 h-5" />
                      )}
                    </div>
                    <div>
                      <h2 className="text-base font-bold text-[var(--ink)] m-0 leading-tight">
                        {rdv.titre}
                      </h2>
                      <div className="flex items-center gap-2 text-xs text-[var(--ink-soft)] mt-0.5">
                        <span
                          className={`uppercase font-bold px-1.5 py-0.5 rounded text-[10px] ${
                            isPapa
                              ? 'bg-blue-500/20 text-blue-300'
                              : 'bg-rose-500/20 text-rose-300'
                          }`}
                        >
                          {rdv.patient}
                        </span>
                        <span>
                          {isRecurrent
                            ? `Passage récurrent (${rdv.moment || 'matin'})`
                            : `Date : ${rdv.date_debut}`}
                        </span>
                      </div>
                    </div>
                  </div>

                  <span className="text-xs px-2.5 py-1 rounded-full bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--ink-soft)] font-medium">
                    {rdv.moment ? `Période ${rdv.moment}` : 'Heure fixée'}
                  </span>
                </div>

                <div className="flex flex-col gap-1 pt-1 border-t border-[var(--border)]/60 text-xs text-[var(--ink-soft)]">
                  <div className="flex items-center gap-1.5">
                    <MapPin className="w-3.5 h-3.5 shrink-0 text-amber-400" />
                    <span>{rdv.lieu}</span>
                  </div>
                  {rdv.notes && (
                    <div className="flex items-start gap-1.5 mt-0.5 text-[var(--ink)]">
                      <AlertCircle className="w-3.5 h-3.5 shrink-0 text-sky-400 mt-0.5" />
                      <span className="italic">{rdv.notes}</span>
                    </div>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};