import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { listMedicines, createMedicine, deleteMedicine } from '@/services/medicines';
import { MedicineForm, StrengthUnit, MedicineCategory } from '@meshitrack/shared';
import type { CreateMedicineInput } from '@meshitrack/shared';

type Medicine = {
  _id: string;
  name: string;
  form: string;
  strength: number;
  strengthUnit: string;
  category: string;
  tags: string[];
};

const FORM_LABELS: Record<string, string> = {
  tablet: 'Tablet',
  capsule: 'Capsule',
  liquid: 'Liquid',
  injection: 'Injection',
  other: 'Other',
};

const CATEGORY_LABELS: Record<string, string> = {
  prescription: 'Prescription',
  otc: 'OTC',
  supplement: 'Supplement',
  other: 'Other',
};

const CATEGORY_COLORS: Record<string, string> = {
  prescription: 'bg-blue-100 text-blue-700',
  otc: 'bg-green-100 text-green-700',
  supplement: 'bg-purple-100 text-purple-700',
  other: 'bg-gray-100 text-gray-700',
};

export function LibraryTab({ householdId }: { householdId: string }) {
  const [medicines, setMedicines] = useState<Medicine[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [search, setSearch] = useState('');
  const [filterCategory, setFilterCategory] = useState('');
  const [filterForm, setFilterForm] = useState('');

  const fetchMedicines = useCallback(async () => {
    if (!householdId) return;
    setLoading(true);
    try {
      const result = await listMedicines(householdId, {
        q: search || undefined,
        category: filterCategory || undefined,
        form: filterForm || undefined,
        limit: 50,
      });
      setMedicines(result.data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load medicines');
    } finally {
      setLoading(false);
    }
  }, [householdId, search, filterCategory, filterForm]);

  useEffect(() => {
    if (householdId) {
      fetchMedicines();
    }
  }, [householdId, fetchMedicines]);

  async function handleDelete(id: string, name: string) {
    if (!householdId || !confirm(`Delete "${name}"?`)) return;
    try {
      await deleteMedicine(householdId, id);
      setMedicines((prev) => prev.filter((m) => m._id !== id));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to delete');
    }
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div />
        <button
          onClick={() => setShowForm(!showForm)}
          className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
        >
          {showForm ? 'Cancel' : 'Add Medicine'}
        </button>
      </div>

      {error && (
        <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
          {error}
          <button onClick={() => setError('')} className="ml-2 underline">
            Dismiss
          </button>
        </div>
      )}

      {showForm && (
        <CreateMedicineForm
          householdId={householdId}
          onCreated={() => {
            setShowForm(false);
            fetchMedicines();
          }}
          onCancel={() => setShowForm(false)}
        />
      )}

      <div className="mb-4 flex flex-wrap items-center gap-3">
        <input
          type="text"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Search medicines..."
          className="w-full max-w-md rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
        />
        <select
          value={filterCategory}
          onChange={(e) => setFilterCategory(e.target.value)}
          className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
        >
          <option value="">All Categories</option>
          {Object.values(MedicineCategory).map((c) => (
            <option key={c} value={c}>
              {CATEGORY_LABELS[c] ?? c}
            </option>
          ))}
        </select>
        <select
          value={filterForm}
          onChange={(e) => setFilterForm(e.target.value)}
          className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
        >
          <option value="">All Forms</option>
          {Object.values(MedicineForm).map((f) => (
            <option key={f} value={f}>
              {FORM_LABELS[f] ?? f}
            </option>
          ))}
        </select>
      </div>

      {loading ? (
        <div className="space-y-3">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="animate-pulse rounded-xl border bg-white p-4 h-20" />
          ))}
        </div>
      ) : medicines.length === 0 ? (
        <div className="rounded-xl border bg-white p-6 shadow-sm text-center text-gray-500">
          {search || filterCategory || filterForm
            ? 'No medicines found matching your filters.'
            : 'No medicines yet. Add your first one above.'}
        </div>
      ) : (
        <div className="space-y-3">
          {medicines.map((med) => (
            <div
              key={med._id}
              className="rounded-xl border bg-white p-4 shadow-sm flex items-center justify-between"
            >
              <Link href={`/medicines/${med._id}`} className="flex-1 min-w-0">
                <div className="flex items-center gap-3">
                  <div>
                    <h3 className="font-medium text-gray-900">{med.name}</h3>
                    <p className="text-sm text-gray-500">
                      {med.strength} {med.strengthUnit} {FORM_LABELS[med.form] ?? med.form}
                    </p>
                  </div>
                </div>
              </Link>
              <div className="flex items-center gap-3 ml-4">
                <span
                  className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${CATEGORY_COLORS[med.category] ?? CATEGORY_COLORS['other']}`}
                >
                  {CATEGORY_LABELS[med.category] ?? med.category}
                </span>
                <button
                  onClick={() => handleDelete(med._id, med.name)}
                  className="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
                  title="Delete"
                >
                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                    />
                  </svg>
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function CreateMedicineForm({
  householdId,
  onCreated,
  onCancel,
}: {
  householdId: string;
  onCreated: () => void;
  onCancel: () => void;
}) {
  const [formData, setFormData] = useState<CreateMedicineInput>({
    name: '',
    form: MedicineForm.TABLET,
    strength: 0,
    strengthUnit: StrengthUnit.MG,
    category: MedicineCategory.OTC,
    tags: [],
  });
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');
    setSubmitting(true);
    try {
      await createMedicine(householdId, {
        ...formData,
        name: formData.name.trim(),
        strength: Number(formData.strength),
      });
      onCreated();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to create medicine');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
      <h2 className="text-lg font-semibold mb-4">Add Medicine</h2>
      {error && (
        <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
          {error}
        </div>
      )}
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
            <input
              type="text"
              required
              maxLength={200}
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="e.g. Metformin"
              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Form</label>
            <select
              value={formData.form}
              onChange={(e) => setFormData({ ...formData, form: e.target.value as MedicineForm })}
              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
            >
              {Object.values(MedicineForm).map((f) => (
                <option key={f} value={f}>
                  {FORM_LABELS[f] ?? f}
                </option>
              ))}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Strength</label>
              <input
                type="number"
                required
                min={0.01}
                step="any"
                value={formData.strength || ''}
                onChange={(e) => setFormData({ ...formData, strength: Number(e.target.value) })}
                placeholder="500"
                className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
              <select
                value={formData.strengthUnit}
                onChange={(e) =>
                  setFormData({ ...formData, strengthUnit: e.target.value as StrengthUnit })
                }
                className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
              >
                {Object.values(StrengthUnit).map((u) => (
                  <option key={u} value={u}>
                    {u}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
            <select
              value={formData.category}
              onChange={(e) =>
                setFormData({ ...formData, category: e.target.value as MedicineCategory })
              }
              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
            >
              {Object.values(MedicineCategory).map((c) => (
                <option key={c} value={c}>
                  {CATEGORY_LABELS[c] ?? c}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
            <input
              type="text"
              maxLength={1000}
              value={formData.notes ?? ''}
              onChange={(e) => setFormData({ ...formData, notes: e.target.value || undefined })}
              placeholder="Any additional notes"
              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
            />
          </div>
        </div>
        <div className="flex gap-3 pt-2">
          <button
            type="submit"
            disabled={submitting}
            className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
          >
            {submitting ? 'Creating...' : 'Create Medicine'}
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}