'use client';

import { useState, useEffect } from 'react';
import { Loader2, AlertCircle, CheckCircle } from 'lucide-react';
import { getClubProfile, updateClubProfile } from '@/src/lib/api/courts';
import type { ClubProfile, ClubProfileUpdateRequest} from '@/src/types/courts';
import { COMMON_TIMEZONES, isValidEmail, isValidUrl } from '@/src/types/courts';

interface ClubProfileTabProps {
  clubId: number;
  onUpdate?: () => void;
}

export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps) {
  const [profile, setProfile] = useState<ClubProfile | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Form state
  const [name, setName] = useState('');
  const [timezone, setTimezone] = useState('');
  const [addressLine1, setAddressLine1] = useState('');
  const [addressLine2, setAddressLine2] = useState('');
  const [city, setCity] = useState('');
  const [postalCode, setPostalCode] = useState('');
  const [country, setCountry] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  const [website, setWebsite] = useState('');

  useEffect(() => {
    loadProfile();
  }, [clubId]);

  async function loadProfile() {
    setLoading(true);
    const result = await getClubProfile(clubId);

    if (result.success) {
      const prof = result.data;
      setProfile(prof);

      // Populate form
      setName(prof.name);
      setTimezone(prof.timezone);
      setAddressLine1(prof.address_line_1 || '');
      setAddressLine2(prof.address_line_2 || '');
      setCity(prof.city || '');
      setPostalCode(prof.postal_code || '');
      setCountry(prof.country || '');
      setPhone(prof.phone || '');
      setEmail(prof.email || '');
      setWebsite(prof.website || '');

      setError(null);
    } else {
      setError(result.error.detail);
    }

    setLoading(false);
  }

  function validateForm(): boolean {
    const newErrors: Record<string, string> = {};

    if (!name || name.trim().length === 0) {
      newErrors.name = 'Name is required';
    }

    if (!timezone) {
      newErrors.timezone = 'Timezone is required';
    }

    if (email && !isValidEmail(email)) {
      newErrors.email = 'Invalid email format';
    }

    if (website && !isValidUrl(website)) {
      newErrors.website = 'Invalid URL format (must include http:// or https://)';
    }

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

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!validateForm()) {
      return;
    }

    setSaving(true);
    setError(null);
    setSuccess(false);

    const request: ClubProfileUpdateRequest = {
      name: name.trim(),
      timezone,
      address_line_1: addressLine1.trim() || undefined,
      address_line_2: addressLine2.trim() || undefined,
      city: city.trim() || undefined,
      postal_code: postalCode.trim() || undefined,
      country: country.trim() || undefined,
      phone: phone.trim() || undefined,
      email: email.trim() || undefined,
      website: website.trim() || undefined,
    };

    const result = await updateClubProfile(clubId, request);

    if (result.success) {
      setProfile(result.data);
      setSuccess(true);
      setError(null);

      // Call parent update callback
      if (onUpdate) {
        onUpdate();
      }

      // Hide success message after 3 seconds
      setTimeout(() => setSuccess(false), 3000);
    } else {
      // Handle validation errors
      if (result.error.code === 'validation_error' && result.error.errors) {
        const fieldErrors: Record<string, string> = {};
        result.error.errors.forEach(err => {
          fieldErrors[err.field] = err.message;
        });
        setErrors(fieldErrors);
      } else {
        setError(result.error.detail);
      }
    }

    setSaving(false);
  }

  function handleCancel() {
    if (!profile) return;

    // Reset form to original values
    setName(profile.name);
    setTimezone(profile.timezone);
    setAddressLine1(profile.address_line_1 || '');
    setAddressLine2(profile.address_line_2 || '');
    setCity(profile.city || '');
    setPostalCode(profile.postal_code || '');
    setCountry(profile.country || '');
    setPhone(profile.phone || '');
    setEmail(profile.email || '');
    setWebsite(profile.website || '');
    setErrors({});
    setError(null);
  }

  // Loading state
  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-8 h-8 text-slate-600 animate-spin" />
      </div>
    );
  }

  // Error state
  if (error && !profile) {
    return (
      <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-6">
        <div className="flex items-start space-x-3">
          <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
          <p className="text-red-700">{error}</p>
        </div>
      </div>
    );
  }

  if (!profile) return null;

  return (
    <div className="max-w-4xl">
      {/* Success message */}
      {success && (
        <div className="mb-6 bg-green-50 border-2 border-green-200 rounded-2xl p-6">
          <div className="flex items-center space-x-3">
            <CheckCircle className="w-5 h-5 text-green-600" />
            <p className="text-green-700 font-medium">Profile updated successfully</p>
          </div>
        </div>
      )}

      {/* Error message */}
      {error && (
        <div className="mb-6 bg-red-50 border-2 border-red-200 rounded-2xl p-6">
          <div className="flex items-start space-x-3">
            <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
            <p className="text-red-700">{error}</p>
          </div>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-8">
        {/* Basic Information */}
        <section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
          <h3 className="text-xl font-bold text-slate-900 mb-6">Basic Information</h3>

          <div className="space-y-4">
            {/* Name */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Name <span className="text-red-600">*</span>
              </label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
                  errors.name
                    ? 'border-red-300 focus:border-red-500'
                    : 'border-slate-200 focus:border-slate-900'
                } focus:outline-none`}
                disabled={saving}
              />
              {errors.name && (
                <p className="mt-1 text-sm text-red-600">{errors.name}</p>
              )}
            </div>

            {/* Timezone */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Timezone <span className="text-red-600">*</span>
              </label>
              <select
                value={timezone}
                onChange={(e) => setTimezone(e.target.value)}
                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
                  errors.timezone
                    ? 'border-red-300 focus:border-red-500'
                    : 'border-slate-200 focus:border-slate-900'
                } focus:outline-none`}
                disabled={saving}
              >
                {COMMON_TIMEZONES.map((tz) => (
                  <option key={tz.value} value={tz.value}>
                    {tz.label}
                  </option>
                ))}
              </select>
              {errors.timezone && (
                <p className="mt-1 text-sm text-red-600">{errors.timezone}</p>
              )}
            </div>
          </div>
        </section>

        {/* Location */}
        <section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
          <h3 className="text-xl font-bold text-slate-900 mb-6">Location</h3>

          <div className="space-y-4">
            {/* Address Line 1 */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Address Line 1
              </label>
              <input
                type="text"
                value={addressLine1}
                onChange={(e) => setAddressLine1(e.target.value)}
                placeholder="123 High Street"
                maxLength={200}
                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
                disabled={saving}
              />
            </div>

            {/* Address Line 2 */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Address Line 2
              </label>
              <input
                type="text"
                value={addressLine2}
                onChange={(e) => setAddressLine2(e.target.value)}
                placeholder="Building A"
                maxLength={200}
                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
                disabled={saving}
              />
            </div>

            {/* City & Postal Code */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-semibold text-slate-900 mb-2">
                  City
                </label>
                <input
                  type="text"
                  value={city}
                  onChange={(e) => setCity(e.target.value)}
                  placeholder="London"
                  maxLength={100}
                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
                  disabled={saving}
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-slate-900 mb-2">
                  Postal Code
                </label>
                <input
                  type="text"
                  value={postalCode}
                  onChange={(e) => setPostalCode(e.target.value)}
                  placeholder="SW1A 1AA"
                  maxLength={20}
                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
                  disabled={saving}
                />
              </div>
            </div>

            {/* Country */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Country
              </label>
              <input
                type="text"
                value={country}
                onChange={(e) => setCountry(e.target.value)}
                placeholder="United Kingdom"
                maxLength={100}
                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
                disabled={saving}
              />
            </div>
          </div>
        </section>

        {/* Contact */}
        <section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
          <h3 className="text-xl font-bold text-slate-900 mb-6">Contact</h3>

          <div className="space-y-4">
            {/* Phone */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Phone
              </label>
              <input
                type="tel"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="+44 20 1234 5678"
                maxLength={50}
                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
                disabled={saving}
              />
            </div>

            {/* Email */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Email
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="info@centralpadel.com"
                maxLength={100}
                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
                  errors.email
                    ? 'border-red-300 focus:border-red-500'
                    : 'border-slate-200 focus:border-slate-900'
                } focus:outline-none`}
                disabled={saving}
              />
              {errors.email && (
                <p className="mt-1 text-sm text-red-600">{errors.email}</p>
              )}
            </div>

            {/* Website */}
            <div>
              <label className="block text-sm font-semibold text-slate-900 mb-2">
                Website
              </label>
              <input
                type="url"
                value={website}
                onChange={(e) => setWebsite(e.target.value)}
                placeholder="https://www.centralpadel.com"
                maxLength={200}
                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
                  errors.website
                    ? 'border-red-300 focus:border-red-500'
                    : 'border-slate-200 focus:border-slate-900'
                } focus:outline-none`}
                disabled={saving}
              />
              {errors.website && (
                <p className="mt-1 text-sm text-red-600">{errors.website}</p>
              )}
            </div>
          </div>
        </section>

        {/* Integration (read-only) */}
        <section className="bg-slate-50 border-2 border-slate-200 rounded-2xl p-6">
          <h3 className="text-xl font-bold text-slate-900 mb-6">Integration</h3>

          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <span className="text-slate-600 font-medium">Provider:</span>
              <span className="font-semibold text-slate-900">{profile.provider}</span>
            </div>
            {profile.provider !== 'local' && profile.remote_club_id && (
              <div className="flex justify-between items-center">
                <span className="text-slate-600 font-medium">Remote Club ID:</span>
                <span className="font-mono text-slate-900">{profile.remote_club_id}</span>
              </div>
            )}
          </div>
        </section>

        {/* Actions */}
        <div className="flex items-center justify-end space-x-3 pt-4">
          <button
            type="button"
            onClick={handleCancel}
            className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
            disabled={saving}
          >
            Cancel
          </button>
          <button
            type="submit"
            className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            disabled={saving}
          >
            {saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
            Save Changes
          </button>
        </div>
      </form>
    </div>
  );
}