import React, { useState, useEffect } from 'react';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Switch } from '../../components/ui/switch';
import { Label } from '../../components/ui/label';
import { toast } from 'sonner';
import { BookUser, Save, RotateCcw, Loader2, AlertCircle } from 'lucide-react';
import {
  Alert,
  AlertDescription,
} from '../../components/ui/alert';

const AdminDirectorySettings = () => {
  const [config, setConfig] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [hasChanges, setHasChanges] = useState(false);
  const [initialConfig, setInitialConfig] = useState(null);

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

  useEffect(() => {
    if (initialConfig && config) {
      const changed = JSON.stringify(config) !== JSON.stringify(initialConfig);
      setHasChanges(changed);
    }
  }, [config, initialConfig]);

  const fetchConfig = async () => {
    try {
      setLoading(true);
      const response = await api.get('/admin/directory/config');
      setConfig(response.data.config);
      setInitialConfig(response.data.config);
    } catch (error) {
      console.error('Failed to fetch directory config:', error);
      toast.error('Failed to load directory configuration');
    } finally {
      setLoading(false);
    }
  };

  const handleToggleField = (fieldId) => {
    // Don't allow disabling show_in_directory - it's required
    if (fieldId === 'show_in_directory') {
      toast.error('The "Show in Directory" field cannot be disabled');
      return;
    }

    setConfig(prev => ({
      ...prev,
      fields: {
        ...prev.fields,
        [fieldId]: {
          ...prev.fields[fieldId],
          enabled: !prev.fields[fieldId].enabled
        }
      }
    }));
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      await api.put('/admin/directory/config', { config });
      setInitialConfig(config);
      setHasChanges(false);
      toast.success('Directory configuration saved successfully');
    } catch (error) {
      console.error('Failed to save directory config:', error);
      toast.error('Failed to save directory configuration');
    } finally {
      setSaving(false);
    }
  };

  const handleReset = async () => {
    if (!window.confirm('Are you sure you want to reset to default settings? This will enable all directory fields.')) {
      return;
    }

    try {
      setSaving(true);
      const response = await api.post('/admin/directory/config/reset');
      setConfig(response.data.config);
      setInitialConfig(response.data.config);
      setHasChanges(false);
      toast.success('Directory configuration reset to defaults');
    } catch (error) {
      console.error('Failed to reset directory config:', error);
      toast.error('Failed to reset directory configuration');
    } finally {
      setSaving(false);
    }
  };

  const handleCancel = () => {
    setConfig(initialConfig);
    setHasChanges(false);
  };

  // Field descriptions for better UX
  const fieldDescriptions = {
    show_in_directory: 'Master toggle for members to opt-in to the directory (always enabled)',
    directory_email: 'Email address visible to other members in the directory',
    directory_bio: 'Short biography shown in directory profile and member cards',
    directory_address: 'Physical address visible to other members',
    directory_phone: 'Phone number visible to other members',
    directory_dob: 'Birthday shown in directory profiles',
    directory_partner_name: 'Partner name displayed in directory',
    volunteer_interests: 'Volunteer interest badges shown in profiles',
    social_media: 'Social media links (Facebook, Instagram, Twitter, LinkedIn)',
  };

  // Field icons for better UX
  const fieldLabels = {
    show_in_directory: 'Show in Directory Toggle',
    directory_email: 'Directory Email',
    directory_bio: 'Bio / About',
    directory_address: 'Address',
    directory_phone: 'Phone Number',
    directory_dob: 'Birthday',
    directory_partner_name: 'Partner Name',
    volunteer_interests: 'Volunteer Interests',
    social_media: 'Social Media Links',
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Loader2 className="h-8 w-8 animate-spin text-brand-purple" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-semibold text-foreground flex items-center gap-2">
            <BookUser className="h-6 w-6 text-brand-purple" />
            Directory Field Settings
          </h2>
          <p className="text-muted-foreground mt-1">
            Configure which fields are available in member profiles and the directory
          </p>
        </div>
      </div>

      {/* Info Alert */}
      <Alert>
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          These settings control which fields appear in the <strong>Profile page</strong> and <strong>Member Directory</strong>.
          Disabling a field will hide it from both locations. Existing data will be preserved but not displayed.
        </AlertDescription>
      </Alert>

      {/* Fields Configuration */}
      <Card className="p-6">
        <div className="space-y-6">
          {config && Object.entries(config.fields).map(([fieldId, fieldData]) => (
            <div
              key={fieldId}
              className={`flex items-center justify-between p-4 rounded-lg border ${
                fieldData.enabled ? 'bg-background border-border' : 'bg-muted/50 border-muted'
              }`}
            >
              <div className="flex-1">
                <Label className="text-base font-medium text-foreground">
                  {fieldLabels[fieldId] || fieldData.label || fieldId}
                </Label>
                <p className="text-sm text-muted-foreground mt-1">
                  {fieldDescriptions[fieldId] || fieldData.description}
                </p>
              </div>
              <Switch
                checked={fieldData.enabled}
                onCheckedChange={() => handleToggleField(fieldId)}
                disabled={fieldId === 'show_in_directory'}
                className="data-[state=checked]:bg-brand-purple"
              />
            </div>
          ))}
        </div>
      </Card>

      {/* Action Buttons */}
      <div className="flex items-center justify-between pt-4 border-t">
        <Button
          variant="outline"
          onClick={handleReset}
          disabled={saving}
          className="text-muted-foreground"
        >
          <RotateCcw className="h-4 w-4 mr-2" />
          Reset to Defaults
        </Button>

        <div className="flex items-center gap-3">
          {hasChanges && (
            <span className="text-sm text-muted-foreground flex items-center gap-2">
              <span className="h-2 w-2 rounded-full bg-orange-500"></span>
              Unsaved changes
            </span>
          )}
          <Button
            variant="outline"
            onClick={handleCancel}
            disabled={!hasChanges || saving}
          >
            Cancel
          </Button>
          <Button
            onClick={handleSave}
            disabled={!hasChanges || saving}
            className="bg-brand-purple hover:bg-brand-purple/90 text-white"
          >
            {saving ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Saving...
              </>
            ) : (
              <>
                <Save className="h-4 w-4 mr-2" />
                Save Changes
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  );
};

export default AdminDirectorySettings;
