"use client";

import { useState } from "react";

interface Props {
  lang: "ar" | "en";
}

export default function OrderStatusTracker({ lang }: Props) {
  const isAr = lang === "ar";
  const [selectedOrder, setSelectedOrder] = useState("12345");
  const [notifyOnChange, setNotifyOnChange] = useState(true);

  const content = {
    ar: {
      title: "تتبع حالة الطلبات والتحديثات",
      subtitle: "إشعارات فورية عند كل تغيير في الحالة",
      orders: {
        title: "الطلبات النشطة",
        items: [
          {
            id: "12345",
            patient: "أحمد محمد",
            service: "تنظيف أسنان",
            status: "ready",
            time: "منذ 5 دقائق",
          },
          {
            id: "12346",
            patient: "فاطمة علي",
            service: "فحص عام",
            status: "in_progress",
            time: "منذ 20 دقيقة",
          },
          {
            id: "12347",
            patient: "خالد سالم",
            service: "نتائج فحوصات",
            status: "completed",
            time: "منذ ساعة",
          },
        ],
      },
      statuses: {
        received: { label: "تم الاستلام", icon: "📥", color: "blue" },
        in_progress: { label: "قيد المعالجة", icon: "⚙️", color: "yellow" },
        ready: { label: "جاهز للاستلام", icon: "✅", color: "green" },
        out_delivery: { label: "في الطريق", icon: "🚚", color: "purple" },
        completed: { label: "مكتمل", icon: "🎉", color: "emerald" },
      },
      timeline: {
        title: "المخطط الزمني للطلب",
        events: [
          {
            time: "10:00 ص",
            event: "استلام الطلب",
            desc: "تم تسجيل الطلب في النظام",
          },
          { time: "10:15 ص", event: "بدء المعالجة", desc: "الطبيب بدأ الفحص" },
          { time: "10:45 ص", event: "جاهز للاستلام", desc: "النتائج جاهزة" },
          {
            time: "11:00 ص",
            event: "تم الإرسال للمريض",
            desc: "رابط التحميل متاح",
          },
        ],
      },
      templates: {
        ready_pickup:
          "طلبك #{{order_id}} جاهز للاستلام من {{pickup_point}}. الاتجاهات: {{map_link}}",
        status_update:
          "تحديث الطلب #{{order_id}}: {{new_status}}. تتبع: {{tracking_link}}",
        completed: "طلبك #{{order_id}} مكتمل. قيم تجربتك: {{review_link}}",
      },
      settings: {
        notifyOnChange: "إشعار عند تغيير الحالة",
        includeTracking: "تضمين رابط التتبع",
        pickupInstructions: "إرسال تعليمات الاستلام",
        reviewRequest: "طلب التقييم بعد الإكمال",
      },
    },
    en: {
      title: "Order Status & Updates Tracking",
      subtitle: "Real-time notifications for every status change",
      orders: {
        title: "Active Orders",
        items: [
          {
            id: "12345",
            patient: "Ahmed Mohammed",
            service: "Teeth Cleaning",
            status: "ready",
            time: "5 min ago",
          },
          {
            id: "12346",
            patient: "Fatima Ali",
            service: "General Checkup",
            status: "in_progress",
            time: "20 min ago",
          },
          {
            id: "12347",
            patient: "Khaled Salem",
            service: "Test Results",
            status: "completed",
            time: "1 hour ago",
          },
        ],
      },
      statuses: {
        received: { label: "Received", icon: "📥", color: "blue" },
        in_progress: { label: "In Progress", icon: "⚙️", color: "yellow" },
        ready: { label: "Ready for Pickup", icon: "✅", color: "green" },
        out_delivery: {
          label: "Out for Delivery",
          icon: "🚚",
          color: "purple",
        },
        completed: { label: "Completed", icon: "🎉", color: "emerald" },
      },
      timeline: {
        title: "Order Timeline",
        events: [
          {
            time: "10:00 AM",
            event: "Order Received",
            desc: "Order registered in system",
          },
          {
            time: "10:15 AM",
            event: "Processing Started",
            desc: "Doctor started examination",
          },
          {
            time: "10:45 AM",
            event: "Ready for Pickup",
            desc: "Results are ready",
          },
          {
            time: "11:00 AM",
            event: "Sent to Patient",
            desc: "Download link available",
          },
        ],
      },
      templates: {
        ready_pickup:
          "Order #{{order_id}} is ready. Collect at {{pickup_point}}. Directions: {{map_link}}",
        status_update:
          "Order #{{order_id}} update: {{new_status}}. Track: {{tracking_link}}",
        completed:
          "Order #{{order_id}} completed. Rate your experience: {{review_link}}",
      },
      settings: {
        notifyOnChange: "Notify on status change",
        includeTracking: "Include tracking link",
        pickupInstructions: "Send pickup instructions",
        reviewRequest: "Request review after completion",
      },
    },
  };

  const t = content[lang];

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      blue: "from-blue-500 to-blue-600",
      yellow: "from-yellow-500 to-yellow-600",
      green: "from-green-500 to-green-600",
      purple: "from-purple-500 to-purple-600",
      emerald: "from-emerald-500 to-emerald-600",
    };
    return (
      colors[t.statuses[status as keyof typeof t.statuses]?.color] ||
      "from-gray-500 to-gray-600"
    );
  };

  return (
    <div className="space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-brand-ink dark:text-white">
          {t.title}
        </h2>
        <p className="text-gray-600 dark:text-gray-300">{t.subtitle}</p>
      </div>

      <div className="grid lg:grid-cols-2 gap-8">
        {/* Active Orders List */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {t.orders.title}
          </h3>
          <div className="space-y-3">
            {t.orders.items.map((order) => (
              <button
                key={order.id}
                onClick={() => setSelectedOrder(order.id)}
                className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
                  selectedOrder === order.id
                    ? "border-brand-green bg-brand-green/10"
                    : "border-gray-300 dark:border-gray-600 hover:border-brand-green bg-white dark:bg-slate-800"
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <span className="font-bold text-brand-ink dark:text-white">
                        #{order.id}
                      </span>
                      <span className="text-sm text-gray-600 dark:text-gray-400">
                        - {order.patient}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {order.service}
                    </p>
                    <p className="text-xs text-gray-500">{order.time}</p>
                  </div>
                  <div
                    className={`px-3 py-1 rounded-full bg-gradient-to-r ${getStatusColor(order.status)} text-white text-sm font-medium`}
                  >
                    {t.statuses[order.status as keyof typeof t.statuses].icon}{" "}
                    {t.statuses[order.status as keyof typeof t.statuses].label}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Status Timeline */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {t.timeline.title} #{selectedOrder}
          </h3>
          <div className="relative">
            {/* Timeline Line */}
            <div className="absolute left-6 top-8 bottom-8 w-0.5 bg-gray-300 dark:bg-gray-600"></div>

            {/* Timeline Events */}
            <div className="space-y-6">
              {t.timeline.events.map((event, i) => (
                <div key={i} className="flex gap-4">
                  <div
                    className={`relative z-10 w-12 h-12 rounded-full flex items-center justify-center ${
                      i <= 2
                        ? "bg-brand-green text-white"
                        : "bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-400"
                    }`}
                  >
                    {i <= 2 ? "✓" : i + 1}
                  </div>
                  <div className="flex-1 pt-2">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-bold text-brand-ink dark:text-white">
                        {event.event}
                      </span>
                      <span className="text-xs text-gray-500">
                        {event.time}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      {event.desc}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Status Types Grid */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
        {Object.entries(t.statuses).map(([key, status]) => (
          <div
            key={key}
            className={`p-4 rounded-xl bg-gradient-to-br ${getStatusColor(key)} text-white text-center shadow-lg`}
          >
            <div className="text-3xl mb-2">{status.icon}</div>
            <p className="text-sm font-medium">{status.label}</p>
          </div>
        ))}
      </div>

      {/* Message Templates */}
      <div className="bg-gray-50 dark:bg-slate-800 rounded-3xl p-6 space-y-4">
        <h3 className="text-lg font-bold text-brand-ink dark:text-white">
          {isAr ? "قوالب الرسائل" : "Message Templates"}
        </h3>
        <div className="space-y-3">
          {Object.entries(t.templates).map(([key, template]) => (
            <div
              key={key}
              className="bg-white dark:bg-slate-900 rounded-xl p-4"
            >
              <div className="flex items-center gap-2 mb-2">
                <span className="text-sm font-semibold text-brand-green">
                  {key.replace("_", " ").toUpperCase()}
                </span>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                {template}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Settings */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 space-y-4">
        <h3 className="text-lg font-bold text-brand-ink dark:text-white">
          {isAr ? "الإعدادات" : "Settings"}
        </h3>
        <div className="space-y-3">
          {Object.entries(t.settings).map(([key, label]) => (
            <label key={key} className="flex items-center gap-3">
              <input
                type="checkbox"
                defaultChecked={
                  key === "notifyOnChange" ? notifyOnChange : true
                }
                onChange={(e) =>
                  key === "notifyOnChange" &&
                  setNotifyOnChange(e.target.checked)
                }
                className="w-5 h-5 text-brand-green rounded focus:ring-brand-green"
              />
              <span className="text-gray-700 dark:text-gray-300">{label}</span>
            </label>
          ))}
        </div>
      </div>

      {/* Live Tracking Link */}
      <div className="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-6 text-white text-center">
        <p className="text-lg font-bold mb-2">
          {isAr ? "رابط التتبع المباشر" : "Live Tracking Link"}
        </p>
        <div className="bg-white/20 backdrop-blur rounded-xl p-3 font-mono text-sm">
          https://track.mawidi.com/order/{selectedOrder}
        </div>
        <button className="mt-4 px-6 py-2 bg-white text-purple-600 rounded-xl font-semibold hover:bg-purple-50 transition-colors">
          {isAr ? "مشاركة الرابط" : "Share Link"}
        </button>
      </div>
    </div>
  );
}