'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { api, apiPaths } from '@/lib/api';
import { useAuthGuard } from '@/lib/useAuthGuard';

type DeliverySettings = {
  sms_enabled: boolean;
  sms_access_token: string;
  email_enabled: boolean;
  email_access_token: string;
  whatsapp_enabled: boolean;
  whatsapp_access_token: string;
};

export default function DeliverySettingsPage() {
  const { checked, authenticated } = useAuthGuard();
  const [settings, setSettings] = useState<DeliverySettings>({
    sms_enabled: false, sms_access_token: '',
    email_enabled: false, email_access_token: '',
    whatsapp_enabled: false, whatsapp_access_token: '',
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!authenticated) return;
    api.get<DeliverySettings>(apiPaths.user.deliverySettings).then((res) => {
      if (res.key === 'success' && res.data) {
        setSettings(res.data as DeliverySettings);
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [authenticated]);

  if (!checked) return null;

  const handleSave = async () => {
    setSaving(true);
    setError('');
    const res = await api.put(apiPaths.user.deliverySettings, settings);
    setSaving(false);
    if (res.key === 'success') {
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } else {
      setError(res.msg || 'حدث خطأ أثناء الحفظ');
    }
  };

  const ChannelCard = ({
    icon, title, subtitle, enabledKey, tokenKey, color
  }: {
    icon: string; title: string; subtitle: string;
    enabledKey: keyof DeliverySettings; tokenKey: keyof DeliverySettings; color: string;
  }) => (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center`}>
            <i className={`${icon} text-2xl text-white`}></i>
          </div>
          <div>
            <h3 className="font-bold text-gray-900">{title}</h3>
            <p className="text-sm text-gray-500">{subtitle}</p>
          </div>
        </div>
        <label className="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={!!settings[enabledKey]}
            onChange={(e) => setSettings({ ...settings, [enabledKey]: e.target.checked })}
            className="sr-only peer"
          />
          <div className="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:right-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
        </label>
      </div>

      {settings[enabledKey] && (
        <div className="mt-4 pt-4 border-t border-gray-100">
          <label className="block text-sm font-semibold text-gray-700 mb-2">رمز الوصول (Access Token)</label>
          <input
            type="text"
            value={settings[tokenKey] as string}
            onChange={(e) => setSettings({ ...settings, [tokenKey]: e.target.value })}
            placeholder="أدخل رمز الوصول الخاص بك..."
            className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
            dir="ltr"
          />
        </div>
      )}
    </div>
  );

  if (loading) {
    return (
      <div dir="rtl" className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-50 flex items-center justify-center">
        <div className="w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  return (
    <div dir="rtl" className="flex flex-col flex-1 bg-gradient-to-br from-blue-50 via-white to-gray-50">
      <main className="max-w-2xl mx-auto px-6 py-8 flex-1 w-full">
        <div className="flex items-center gap-4 mb-6">
          <Link href="/profile" className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
            <i className="ri-arrow-right-line text-xl text-gray-700"></i>
          </Link>
          <h1 className="text-xl font-bold text-gray-900">إعدادات التسليم</h1>
        </div>
        <p className="text-gray-600 mb-6">
          تحكم في كيفية استلام الأكواد الرقمية بعد اكتمال كل طلب
        </p>

        {success && (
          <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 flex items-center gap-2">
            <i className="ri-check-circle-line text-xl"></i>
            تم حفظ الإعدادات بنجاح
          </div>
        )}
        {error && (
          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center gap-2">
            <i className="ri-error-warning-line text-xl"></i>
            {error}
          </div>
        )}

        <div className="space-y-4 mb-8">
          <ChannelCard
            icon="ri-message-3-line"
            title="رسائل نصية (SMS)"
            subtitle="استقبال الأكواد عبر رسالة SMS"
            enabledKey="sms_enabled"
            tokenKey="sms_access_token"
            color="bg-green-500"
          />
          <ChannelCard
            icon="ri-mail-line"
            title="البريد الإلكتروني"
            subtitle="استقبال الأكواد عبر البريد الإلكتروني"
            enabledKey="email_enabled"
            tokenKey="email_access_token"
            color="bg-blue-500"
          />
          <ChannelCard
            icon="ri-whatsapp-line"
            title="واتساب"
            subtitle="استقبال الأكواد عبر واتساب"
            enabledKey="whatsapp_enabled"
            tokenKey="whatsapp_access_token"
            color="bg-emerald-500"
          />
        </div>

        <button
          onClick={handleSave}
          disabled={saving}
          className="w-full bg-blue-600 text-white py-3.5 rounded-xl font-semibold hover:bg-blue-700 disabled:bg-gray-300 transition-colors flex items-center justify-center gap-2"
        >
          {saving ? (
            <>
              <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              جاري الحفظ...
            </>
          ) : (
            <>
              <i className="ri-save-line text-xl"></i>
              حفظ الإعدادات
            </>
          )}
        </button>
      </main>
    </div>
  );
}