import React, { useState, useEffect, useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  FaSave,
  FaTimes,
  FaBuilding,
  FaUser,
  FaMapMarkerAlt,
  FaCreditCard,
  FaEnvelope,
} from "react-icons/fa";
import LoadingSpinner from "../../../components/common/LoadingSpinner";
import { BusinessParty } from "../../../types/common";
import { mockBusinessPartyNew } from "../../../mocks/mockBusinessParties";

interface ValidationErrors {
  [key: string]: string;
}

const CustomerForm: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const isEdit = Boolean(id);

  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [errors, setErrors] = useState<ValidationErrors>({});

  const [formData, setFormData] = useState<BusinessParty>(mockBusinessPartyNew);

  const loadFormData = useCallback(async () => {
    setLoading(true);
    try {
      if (isEdit && id) {
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 1000));

        setFormData(mockBusinessPartyNew);
      }
    } catch (error) {
      console.error("Error loading form data:", error);
    } finally {
      setLoading(false);
    }
  }, [isEdit, id]);

  useEffect(() => {
    loadFormData();
  }, [loadFormData]);

  const validateForm = (): boolean => {
    const newErrors: ValidationErrors = {};

    if (!formData.code.trim()) {
      newErrors.code = "Müşteri kodu zorunludur";
    }
    if (!formData.name.trim()) {
      newErrors.name = "Şirket adı zorunludur";
    }
    if (formData.creditLimit < 0) {
      newErrors.creditLimit = "Kredi limiti 0'dan küçük olamaz";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleInputChange = (
    field: keyof BusinessParty,
    value: string | number | boolean
  ) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));

    // Clear error when user starts typing
    if (errors[field]) {
      setErrors((prev) => ({
        ...prev,
        [field]: "",
      }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) {
      return;
    }

    setSaving(true);
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000));

      console.log("Customer data:", {
        ...formData,
        id: isEdit ? id : undefined,
      });

      // Show success message
      alert(
        isEdit
          ? "Müşteri başarıyla güncellendi!"
          : "Müşteri başarıyla oluşturuldu!"
      );

      // Navigate back to list
      navigate("/admin/crm");
    } catch (error) {
      console.error("Error saving customer:", error);
      alert("Bir hata oluştu. Lütfen tekrar deneyin.");
    } finally {
      setSaving(false);
    }
  };

  const handleCancel = () => {
    navigate("/admin/crm");
  };

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <div className="space-y-4 pt-2">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-gray-900">
            {isEdit ? "Müşteri Düzenle" : "Yeni Müşteri"}
          </h2>
          <p className="text-sm text-gray-600">
            {isEdit
              ? "Mevcut müşteri bilgilerini güncelleyin"
              : "Yeni müşteri bilgilerini girin"}
          </p>
        </div>
      </div>

      {/* Form */}
      <form onSubmit={handleSubmit} className="space-y-3">
        {/* General Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaBuilding className="w-5 h-5 mr-2" />
              Genel Bilgiler
            </h3>
          </div>

          <div className="p-4 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Müşteri Kodu *
                </label>
                <input
                  type="text"
                  value={formData.code}
                  onChange={(e) => handleInputChange("code", e.target.value)}
                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.code
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                  placeholder="Örn: MST001"
                />
                {errors.customerCode && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.customerCode}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Müşteri Tipi
                </label>
                <select
                  value={formData.customerType}
                  onChange={(e) =>
                    handleInputChange(
                      "customerType",
                      e.target.value as "INDIVIDUAL" | "COMPANY"
                    )
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="COMPANY">Şirket</option>
                  <option value="INDIVIDUAL">Bireysel</option>
                </select>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Şirket Adı *
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => handleInputChange("name", e.target.value)}
                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.name
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                  placeholder="Şirket adını girin"
                />
                {errors.companyName && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.companyName}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Sektör
                </label>
                <select
                  value={formData.industry}
                  onChange={(e) =>
                    handleInputChange("industry", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="">Sektör seçin</option>
                  <option value="TECHNOLOGY">Teknoloji</option>
                  <option value="MANUFACTURING">İmalat</option>
                  <option value="CONSTRUCTION">İnşaat</option>
                  <option value="AUTOMOTIVE">Otomotiv</option>
                  <option value="RETAIL">Perakende</option>
                  <option value="FINANCE">Finans</option>
                  <option value="HEALTHCARE">Sağlık</option>
                  <option value="OTHER">Diğer</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-gray-700 mb-1">
                Website
              </label>
              <input
                type="url"
                value={formData.website}
                onChange={(e) => handleInputChange("website", e.target.value)}
                className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                placeholder="https://www.ornek.com"
              />
            </div>
          </div>
        </div>

        {/* Contact Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaUser className="w-5 h-5 mr-2" />
              İletişim Bilgileri
            </h3>
          </div>

          <div className="p-4 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Email *
                </label>
                <input
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleInputChange("email", e.target.value)}
                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.email
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                  placeholder="email@ornek.com"
                />
                {errors.email && (
                  <p className="mt-1 text-sm text-red-600">{errors.email}</p>
                )}
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Telefon *
                </label>
                <input
                  type="tel"
                  value={formData.phone}
                  onChange={(e) => handleInputChange("phone", e.target.value)}
                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.phone
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                  placeholder="+90 212 555 0123"
                />
                {errors.phone && (
                  <p className="mt-1 text-sm text-red-600">{errors.phone}</p>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Address Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaMapMarkerAlt className="w-5 h-5 mr-2" />
              Adres Bilgileri
            </h3>
          </div>
        </div>

        {/* Business Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaCreditCard className="w-5 h-5 mr-2" />
              İş Bilgileri
            </h3>
          </div>

          <div className="p-4 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Vergi Numarası
                </label>
                <input
                  type="text"
                  value={formData.taxNumber}
                  onChange={(e) =>
                    handleInputChange("taxNumber", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  placeholder="1234567890"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Ticaret Sicil No
                </label>
                <input
                  type="text"
                  value={formData.registrationNumber}
                  onChange={(e) =>
                    handleInputChange("registrationNumber", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                  placeholder="98765"
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Kredi Limiti
                </label>
                <input
                  type="number"
                  min="0"
                  step="0.01"
                  value={formData.creditLimit}
                  onChange={(e) =>
                    handleInputChange(
                      "creditLimit",
                      parseFloat(e.target.value) || 0
                    )
                  }
                  className={`block w-full px-3 py-1.5 text-sm border rounded-md shadow-sm focus:outline-none focus:ring-1 ${
                    errors.creditLimit
                      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
                      : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  }`}
                  placeholder="0.00"
                />
                {errors.creditLimit && (
                  <p className="mt-1 text-sm text-red-600">
                    {errors.creditLimit}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Ödeme Koşulları
                </label>
                <select
                  value={formData.paymentTerms}
                  onChange={(e) =>
                    handleInputChange("paymentTerms", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="CASH">Peşin</option>
                  <option value="NET_15">15 Gün Vadeli</option>
                  <option value="NET_30">30 Gün Vadeli</option>
                  <option value="NET_60">60 Gün Vadeli</option>
                  <option value="NET_90">90 Gün Vadeli</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Para Birimi
                </label>
                <select
                  value={formData.currency}
                  onChange={(e) =>
                    handleInputChange("currency", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="TRY">Türk Lirası (TRY)</option>
                  <option value="USD">Amerikan Doları (USD)</option>
                  <option value="EUR">Euro (EUR)</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        {/* Relationship Information */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-3 border-b border-gray-200">
            <h3 className="text-base font-medium text-gray-900 flex items-center">
              <FaEnvelope className="w-5 h-5 mr-2" />
              İlişki Yönetimi
            </h3>
          </div>

          <div className="p-4 space-y-3">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Müşteri Durumu
                </label>
                <select
                  value={formData.status}
                  onChange={(e) => handleInputChange("status", e.target.value)}
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="ACTIVE">Aktif</option>
                  <option value="INACTIVE">Pasif</option>
                  <option value="PROSPECT">Potansiyel</option>
                  <option value="BLOCKED">Blokeli</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Müşteri Segmenti
                </label>
                <select
                  value={formData.customerSegment}
                  onChange={(e) =>
                    handleInputChange("customerSegment", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="STANDARD">Standart</option>
                  <option value="PREMIUM">Premium</option>
                  <option value="ENTERPRISE">Kurumsal</option>
                  <option value="VIP">VIP</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Sorumlu Satış Temsilcisi
                </label>
                <select
                  value={formData.assignedSalesRep}
                  onChange={(e) =>
                    handleInputChange("assignedSalesRep", e.target.value)
                  }
                  className="block w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="">Temsilci seçin</option>
                  <option value="sales_rep_1">Mehmet Özkan</option>
                  <option value="sales_rep_2">Ayşe Demir</option>
                  <option value="sales_rep_3">Ali Yılmaz</option>
                </select>
              </div>
            </div>

            <div className="flex items-center">
              <input
                type="checkbox"
                id="isActive"
                checked={formData.isActive}
                onChange={(e) =>
                  handleInputChange("isActive", e.target.checked)
                }
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label
                htmlFor="isActive"
                className="ml-2 block text-sm text-gray-900"
              >
                Aktif
              </label>
            </div>
          </div>
        </div>

        {/* Form Actions */}
        <div className="flex items-center justify-end space-x-2 bg-gray-50 px-4 py-3 rounded-b-lg">
          <button
            type="button"
            onClick={handleCancel}
            className="inline-flex items-center px-4 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            <FaTimes className="w-4 h-4 mr-2" />
            İptal
          </button>
          <button
            type="submit"
            disabled={saving}
            className="inline-flex items-center px-4 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {saving ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                Kaydediliyor...
              </>
            ) : (
              <>
                <FaSave className="w-4 h-4 mr-2" />
                {isEdit ? "Güncelle" : "Kaydet"}
              </>
            )}
          </button>
        </div>
      </form>
    </div>
  );
};

export default CustomerForm;