import React, { useState, useEffect } from 'react';
import { AlertCircle, Link as LinkIcon, Loader2 } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Card } from '@/components/ui/card';

const RefsTable = () => {
  const [refs, setRefs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [selectedRefId, setSelectedRefId] = useState(null);
  const [showUpdateForm, setShowUpdateForm] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [formData, setFormData] = useState({ refName: '', refUrl: '' });

  const fetchRefs = async () => {
    try {
      setLoading(true);
      const token = localStorage.getItem('token');
      const response = await fetch('http://localhost:8000/refs/', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      if (!response.ok) throw new Error('Failed to fetch refs');
      const data = await response.json();
      setRefs(data);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = localStorage.getItem('token');
    try {
      const response = await fetch('http://localhost:8000/refs/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(formData)
      });
      if (!response.ok) throw new Error('Failed to create ref');
      await fetchRefs();
      setFormData({ refName: '', refUrl: '' });
      setIsCreating(false);
    } catch (err) {
      setError(err.message);
    }
  };

  const handleDelete = async (refId) => {
    const token = localStorage.getItem('token');
    try {
      const response = await fetch(`http://localhost:8000/refs/${refId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      if (!response.ok) throw new Error('Failed to delete ref');
      await fetchRefs();
      setShowDeleteConfirm(false);
    } catch (err) {
      setError(err.message);
    }
  };

  const handleUpdate = async (refId) => {
    const token = localStorage.getItem('token');
    try {
      const response = await fetch(`http://localhost:8000/refs/${refId}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(formData)
      });
      if (!response.ok) throw new Error('Failed to update ref');
      await fetchRefs();
      setShowUpdateForm(false);
      setFormData({ refName: '', refUrl: '' });
    } catch (err) {
      setError(err.message);
    }
  };

  const filteredRefs = refs.filter(ref => 
    ref.refName.toLowerCase().includes(searchTerm.toLowerCase()) ||
    ref.refUrl.toLowerCase().includes(searchTerm.toLowerCase())
  );

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="h-12 w-12 animate-spin text-emerald-500" />
      </div>
    );
  }

  return (
    <div className="container mx-auto p-4">
      <Card className="bg-white rounded-lg shadow-lg overflow-hidden">
        {/* Header and Search */}
        <div className="p-4 bg-gray-300">
          <div className="flex items-center justify-between space-x-4">
            <div className="flex-1">
              <input
                type="search"
                placeholder="Referans Ara..."
                className="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <button
              onClick={() => setIsCreating(true)}
              className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition-colors"
            >
              Yeni Referans Ekle
            </button>
            <button
              onClick={fetchRefs}
              className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              Yenile
            </button>
          </div>
        </div>

        {/* Error Alert */}
        {error && (
          <Alert variant="destructive" className="m-4">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        {/* Table */}
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-800">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">
                  ID
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">
                  Referans Adı
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">
                  URL
                </th>
                <th className="px-6 py-3 text-center text-xs font-medium text-slate-200 uppercase tracking-wider">
                  İşlemler
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredRefs.map((ref) => (
                <tr key={ref.refId} className="hover:bg-gray-100">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    {ref.refId}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {ref.refName}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <div className="flex items-center space-x-2">
                      <LinkIcon className="h-4 w-4" />
                      <a href={ref.refUrl} target="_blank" rel="noopener noreferrer" className="hover:text-emerald-500">
                        {ref.refUrl}
                      </a>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-center">
                    <div className="flex items-center justify-center space-x-2">
                      <button
                        onClick={() => {
                          setSelectedRefId(ref.refId);
                          setFormData({ refName: ref.refName, refUrl: ref.refUrl });
                          setShowUpdateForm(true);
                        }}
                        className="px-3 py-1 bg-emerald-500 text-white rounded-md hover:bg-emerald-600 transition-colors text-xs"
                      >
                        Düzenle
                      </button>
                      <button
                        onClick={() => {
                          setSelectedRefId(ref.refId);
                          setShowDeleteConfirm(true);
                        }}
                        className="px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors text-xs"
                      >
                        Sil
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* No Results Message */}
        {filteredRefs.length === 0 && (
          <div className="text-center py-6 text-gray-500">
            Aradığınız kriterlere uygun referans bulunamadı.
          </div>
        )}
      </Card>

      {/* Create/Update Modal */}
      {(isCreating || showUpdateForm) && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">
              {isCreating ? 'Yeni Referans Ekle' : 'Referans Düzenle'}
            </h2>
            <form onSubmit={(e) => {
              e.preventDefault();
              if (isCreating) {
                handleSubmit(e);
              } else {
                handleUpdate(selectedRefId);
              }
            }}>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">Referans Adı</label>
                  <input
                    type="text"
                    value={formData.refName}
                    onChange={(e) => setFormData({ ...formData, refName: e.target.value })}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">URL</label>
                  <input
                    type="url"
                    value={formData.refUrl}
                    onChange={(e) => setFormData({ ...formData, refUrl: e.target.value })}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                    required
                  />
                </div>
              </div>
              <div className="mt-6 flex justify-end space-x-3">
                <button
                  type="button"
                  onClick={() => {
                    setIsCreating(false);
                    setShowUpdateForm(false);
                    setFormData({ refName: '', refUrl: '' });
                  }}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  İptal
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-emerald-500 text-white rounded-md hover:bg-emerald-600"
                >
                  {isCreating ? 'Ekle' : 'Güncelle'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">Referansı Sil</h2>
            <p className="text-gray-600 mb-6">Bu referansı silmek istediğinizden emin misiniz?</p>
            <div className="flex justify-end space-x-3">
              <button
                onClick={() => setShowDeleteConfirm(false)}
                className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
              >
                İptal
              </button>
              <button
                onClick={() => handleDelete(selectedRefId)}
                className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
              >
                Sil
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default RefsTable;