import React, { useState } from 'react';
import { ArrowLeft, Check, RotateCcw, Pill, Heart, Clock } from 'lucide-react';
import { MedicationInstance, PendingUndoItem, Patient } from '../types';

interface MedsViewProps {
  meds: MedicationInstance[];
  pendingUndos: Record<string, PendingUndoItem>;
  onBack: () => void;
  onMarkDone: (med: MedicationInstance) => void;
  onCancelUndo: (key: string) => void;
}

export const MedsView: React.FC<MedsViewProps> = ({
  meds,
  pendingUndos,
  onBack,
  onMarkDone,
  onCancelUndo,
}) => {
  const [filterPatient, setFilterPatient] = useState<Patient>('tous');

  // Visible meds: non-done meds plus those in pending undo state
  const visibleMeds = meds.filter((m) => {
    const isVisible = !m.fait || pendingUndos[`med-${m.id}`];
    if (!isVisible) return false;
    if (filterPatient === 'tous') return true;
    return m.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">
            Médicaments du jour
          </h1>
          <p className="text-xs text-[var(--ink-soft)] m-0">
            Horaires et posologies pour Papa et Maman
          </p>
        </div>
      </div>

      {/* Onglets Filtre Patient */}
      <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 soins' : pat}
          </button>
        ))}
      </div>

      {/* Liste des médicaments */}
      <div className="flex flex-col gap-2.5 mt-1">
        {visibleMeds.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">
            <Pill className="w-10 h-10 text-[#4EAA6A]" />
            <p className="text-base font-semibold text-[var(--ink)] m-0">
              Tous les médicaments sont administrés pour aujourd'hui !
            </p>
            <p className="text-xs m-0">
              Les prises suivantes seront prêtes demain matin.
            </p>
          </div>
        ) : (
          visibleMeds.map((med) => {
            const undoKey = `med-${med.id}`;
            const pending = pendingUndos[undoKey];
            const isDonePending = !!pending;

            return (
              <div
                key={med.id}
                className={`rounded-xl p-3.5 sm:p-4 flex items-center justify-between gap-3 border transition-all duration-300 ${
                  isDonePending
                    ? 'bg-[#183823] border-[#3F7D53] text-[#DEECE1]'
                    : 'bg-[var(--surface)] border-[var(--border)] text-[var(--ink)]'
                }`}
              >
                <div className="flex items-center gap-3 overflow-hidden">
                  <div
                    className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
                      isDonePending
                        ? 'bg-[#3F7D53] text-white'
                        : med.patient === 'papa'
                        ? 'bg-blue-950/60 text-blue-300 border border-blue-800/60'
                        : 'bg-rose-950/60 text-rose-300 border border-rose-800/60'
                    }`}
                  >
                    {isDonePending ? (
                      <Check className="w-5 h-5" />
                    ) : (
                      <Pill className="w-5 h-5" />
                    )}
                  </div>
                  <div className="truncate">
                    <div className="flex items-center gap-2">
                      <span
                        className={`text-[11px] font-bold px-2 py-0.5 rounded uppercase tracking-wider ${
                          med.patient === 'papa'
                            ? 'bg-blue-500/20 text-blue-300'
                            : 'bg-rose-500/20 text-rose-300'
                        }`}
                      >
                        {med.patient}
                      </span>
                      <span className="flex items-center gap-1 text-xs text-[var(--ink-soft)] font-medium">
                        <Clock className="w-3 h-3" />
                        {med.heure_prevue.substring(0, 5).replace(':', 'h')}
                      </span>
                    </div>

                    <p
                      className={`text-base font-semibold truncate m-0 mt-0.5 ${
                        isDonePending ? 'line-through text-white/90' : 'text-[var(--ink)]'
                      }`}
                    >
                      {med.nom}
                    </p>
                    <p className="text-xs text-[var(--ink-soft)] truncate m-0">
                      Dosage : <strong className="text-[var(--ink)]">{med.dosage}</strong>
                      {isDonePending && (
                        <span className="text-emerald-300 ml-2 font-medium">
                          • Donné par {pending.validatedBy}
                        </span>
                      )}
                    </p>
                  </div>
                </div>

                {/* Bouton Fait / Annuler (5s) */}
                <div className="shrink-0">
                  {isDonePending ? (
                    <button
                      onClick={() => onCancelUndo(undoKey)}
                      className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-emerald-600 text-white text-xs sm:text-sm font-semibold hover:bg-emerald-700 transition-colors shadow-sm cursor-pointer animate-pulse"
                    >
                      <RotateCcw className="w-3.5 h-3.5" />
                      <span>Annuler ({pending.secondsRemaining}s)</span>
                    </button>
                  ) : (
                    <button
                      onClick={() => onMarkDone(med)}
                      className="px-5 py-2 rounded-xl bg-transparent border border-[var(--border)] hover:border-[var(--ink-soft)] text-[var(--ink)] text-sm font-semibold hover:bg-[var(--surface-alt)] transition-colors active:scale-95 cursor-pointer min-w-[76px]"
                    >
                      Fait
                    </button>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};