"use client";

import type { PatientData } from "@/lib/types";
import { ClipboardList, Search, Plus, Clock, CheckCircle, XCircle, Loader2, Send } from "lucide-react";

export function OrdersTab({ data }: { data: PatientData }) {
  const statusConfig: Record<string, { icon: React.ReactNode; color: string }> = {
    Pending: { icon: <Clock size={12} />, color: "bg-yellow-100 text-yellow-700" },
    "In Progress": { icon: <Loader2 size={12} className="animate-spin" />, color: "bg-blue-100 text-blue-700" },
    Resulted: { icon: <CheckCircle size={12} />, color: "bg-green-100 text-green-700" },
    Completed: { icon: <CheckCircle size={12} />, color: "bg-green-100 text-green-700" },
    Sent: { icon: <Send size={12} />, color: "bg-purple-100 text-purple-700" },
    Cancelled: { icon: <XCircle size={12} />, color: "bg-red-100 text-red-700" },
  };

  const orderSets = [
    { name: "Diabetes Management", items: "A1c, CMP, Lipid Panel, UA, Eye Exam Referral" },
    { name: "Hypertension Workup", items: "BMP, Renal Panel, ECG, Echo" },
    { name: "Heart Failure Bundle", items: "BNP, CMP, CBC, CXR, Echo, Daily Weights" },
    { name: "Annual Wellness", items: "CBC, CMP, Lipid, TSH, A1c, UA" },
  ];

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Quick Order Entry */}
      <div className="flex items-center gap-3">
        <div className="relative flex-1">
          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
          <input
            placeholder="Search orders — type test, medication, procedure, or referral..."
            className="w-full pl-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-clinical-500"
          />
        </div>
        <button className="flex items-center gap-1.5 px-4 py-2.5 bg-clinical-600 text-white rounded-xl text-sm font-semibold hover:bg-clinical-700 transition-colors whitespace-nowrap">
          <Plus size={14} />
          New Order
        </button>
      </div>

      {/* Active Orders */}
      <div className="bg-white border border-slate-200 rounded-xl">
        <div className="px-5 py-3 border-b border-slate-100 flex items-center gap-2">
          <ClipboardList size={14} className="text-clinical-600" />
          <h3 className="text-sm font-semibold text-slate-800">
            Active Orders ({data.orders.length})
          </h3>
        </div>
        <div className="divide-y divide-slate-50">
          {data.orders.map((order) => {
            const sc = statusConfig[order.status] || statusConfig.Pending;
            return (
              <div key={order.id} className="px-5 py-3.5 hover:bg-slate-50 transition-colors flex items-center gap-4">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="text-sm font-medium text-slate-800">{order.orderName}</p>
                    {order.priority === "Urgent" && (
                      <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-medium">
                        URGENT
                      </span>
                    )}
                  </div>
                  <p className="text-[10px] text-slate-400 mt-0.5">
                    {order.orderType} • Ordered {new Date(order.orderedAt).toLocaleDateString()}
                  </p>
                </div>
                <span className={`flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-medium ${sc.color}`}>
                  {sc.icon}
                  {order.status}
                </span>
              </div>
            );
          })}
        </div>
      </div>

      {/* Order Sets */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3">⚡ Quick Order Sets</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {orderSets.map((set) => (
            <button
              key={set.name}
              className="text-left bg-slate-50 rounded-lg p-3 hover:bg-clinical-50 hover:border-clinical-300 border border-transparent transition-colors"
            >
              <p className="text-xs font-semibold text-slate-700">{set.name}</p>
              <p className="text-[10px] text-slate-500 mt-0.5">{set.items}</p>
            </button>
          ))}
        </div>
      </div>

      {/* Referral Tracking */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3">🔄 Referral Tracking</h3>
        {data.orders.filter((o) => o.orderType === "Referral").map((ref) => (
          <div key={ref.id} className="flex items-center justify-between py-2">
            <div>
              <p className="text-xs font-medium text-slate-700">{ref.orderName}</p>
              <p className="text-[10px] text-slate-400">
                Sent {new Date(ref.orderedAt).toLocaleDateString()}
              </p>
            </div>
            <span className="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-[10px] font-medium">
              {ref.status}
            </span>
          </div>
        ))}
        {data.orders.filter((o) => o.orderType === "Referral").length === 0 && (
          <p className="text-xs text-slate-400">No active referrals</p>
        )}
      </div>
    </div>
  );
}