import React, { useState, useEffect, useCallback } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../../components/ui/alert-dialog';
import { toast } from 'sonner';
import { useAuth } from '../../context/AuthContext';
import useMemberTiers from '../../hooks/use-member-tiers';
import { TIER_ICON_OPTIONS, BADGE_COLOR_PRESETS } from '../../config/MemberTiers';
import { getTierIcon } from '../../config/memberTierIcons';
import { Save, RotateCcw, Plus, Trash2, GripVertical, AlertTriangle, Users } from 'lucide-react';

const AdminMemberTiers = () => {
  const { user } = useAuth();
  const { tiers, loading, saving, updateTiers, resetToDefaults } = useMemberTiers({ isAdmin: true });
  const [editedTiers, setEditedTiers] = useState([]);
  const [hasChanges, setHasChanges] = useState(false);
  const [showResetDialog, setShowResetDialog] = useState(false);

  const isSuperAdmin = user?.role === 'superadmin';

  // Initialize edited tiers when tiers load
  useEffect(() => {
    if (tiers && tiers.length > 0) {
      setEditedTiers(JSON.parse(JSON.stringify(tiers)));
      setHasChanges(false);
    }
  }, [tiers]);

  // Check for changes
  useEffect(() => {
    if (tiers && editedTiers.length > 0) {
      const changed = JSON.stringify(tiers) !== JSON.stringify(editedTiers);
      setHasChanges(changed);
    }
  }, [tiers, editedTiers]);

  const handleTierChange = useCallback((index, field, value) => {
    setEditedTiers(prev => {
      const updated = [...prev];
      updated[index] = { ...updated[index], [field]: value };
      return updated;
    });
  }, []);

  const handleAddTier = useCallback(() => {
    const newTier = {
      id: `tier_${Date.now()}`,
      label: 'New Tier',
      minYears: editedTiers.length > 0
        ? Math.max(...editedTiers.map(t => t.maxYears || 0)) + 0.001
        : 0,
      maxYears: 999,
      iconKey: 'star',
      badgeClass: 'bg-gray-100 text-gray-800 border-gray-200',
    };
    setEditedTiers(prev => [...prev, newTier]);
  }, [editedTiers]);

  const handleRemoveTier = useCallback((index) => {
    if (editedTiers.length <= 1) {
      toast.error('You must have at least one tier');
      return;
    }
    setEditedTiers(prev => prev.filter((_, i) => i !== index));
  }, [editedTiers.length]);

  const validateTiers = useCallback(() => {
    for (let i = 0; i < editedTiers.length; i++) {
      const tier = editedTiers[i];
      if (!tier.label?.trim()) {
        toast.error(`Tier ${i + 1} must have a label`);
        return false;
      }
      if (tier.minYears < 0) {
        toast.error(`Tier "${tier.label}" has invalid minimum years`);
        return false;
      }
      if (tier.maxYears <= tier.minYears) {
        toast.error(`Tier "${tier.label}" max years must be greater than min years`);
        return false;
      }
    }

    // Check for overlapping ranges
    const sorted = [...editedTiers].sort((a, b) => a.minYears - b.minYears);
    for (let i = 0; i < sorted.length - 1; i++) {
      if (sorted[i].maxYears >= sorted[i + 1].minYears) {
        toast.error(`Tier ranges overlap between "${sorted[i].label}" and "${sorted[i + 1].label}"`);
        return false;
      }
    }

    return true;
  }, [editedTiers]);

  const handleSave = async () => {
    if (!validateTiers()) return;

    const success = await updateTiers(editedTiers);
    if (success) {
      toast.success('Member tiers saved successfully');
    } else {
      toast.error('Failed to save member tiers');
    }
  };

  const handleReset = async () => {
    const success = await resetToDefaults();
    if (success) {
      toast.success('Member tiers reset to defaults');
      setShowResetDialog(false);
    } else {
      toast.error('Failed to reset member tiers');
    }
  };

  const handleDiscardChanges = () => {
    setEditedTiers(JSON.parse(JSON.stringify(tiers)));
    setHasChanges(false);
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header and Actions */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <p className="text-muted-foreground">
          Configure tier names, time ranges, and badges displayed in the members directory.
        </p>
        <div className="flex items-center gap-2">
          {hasChanges && (
            <Button variant="outline" onClick={handleDiscardChanges}>
              Discard
            </Button>
          )}
          {isSuperAdmin && (
            <Button
              variant="outline"
              onClick={() => setShowResetDialog(true)}
              className="text-destructive hover:text-destructive"
            >
              <RotateCcw className="h-4 w-4 mr-2" />
              Reset
            </Button>
          )}
          <Button onClick={handleSave} disabled={saving || !hasChanges}>
            <Save className="h-4 w-4 mr-2" />
            {saving ? 'Saving...' : 'Save Changes'}
          </Button>
        </div>
      </div>

      {/* Tier Cards */}
      <div className="space-y-4">
        {editedTiers.map((tier, index) => {
          const IconComponent = getTierIcon(tier.iconKey);

          return (
            <Card key={tier.id} className="bg-background">
              <CardContent className="pt-6">
                <div className="flex flex-col lg:flex-row gap-6">
                  {/* Drag Handle & Remove */}
                  <div className="flex lg:flex-col items-center gap-2 lg:pt-6">
                    <GripVertical className="h-5 w-5 text-muted-foreground cursor-move" />
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleRemoveTier(index)}
                      className="text-destructive hover:text-destructive hover:bg-destructive/10"
                      disabled={editedTiers.length <= 1}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>

                  {/* Tier Configuration */}
                  <div className="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {/* Label */}
                    <div className="space-y-2">
                      <Label htmlFor={`tier-label-${index}`}>Label</Label>
                      <Input
                        id={`tier-label-${index}`}
                        value={tier.label}
                        onChange={(e) => handleTierChange(index, 'label', e.target.value)}
                        placeholder="Tier Name"
                      />
                    </div>

                    {/* Min Years */}
                    <div className="space-y-2">
                      <Label htmlFor={`tier-min-${index}`}>Min Years</Label>
                      <Input
                        id={`tier-min-${index}`}
                        type="number"
                        step="0.001"
                        min="0"
                        value={tier.minYears}
                        onChange={(e) => handleTierChange(index, 'minYears', parseFloat(e.target.value) || 0)}
                      />
                    </div>

                    {/* Max Years */}
                    <div className="space-y-2">
                      <Label htmlFor={`tier-max-${index}`}>Max Years</Label>
                      <Input
                        id={`tier-max-${index}`}
                        type="number"
                        step="0.001"
                        min="0"
                        value={tier.maxYears}
                        onChange={(e) => handleTierChange(index, 'maxYears', parseFloat(e.target.value) || 0)}
                      />
                    </div>

                    {/* Icon */}
                    <div className="space-y-2">
                      <Label htmlFor={`tier-icon-${index}`}>Icon</Label>
                      <Select
                        value={tier.iconKey}
                        onValueChange={(value) => handleTierChange(index, 'iconKey', value)}
                      >
                        <SelectTrigger id={`tier-icon-${index}`}>
                          <SelectValue placeholder="Select icon" />
                        </SelectTrigger>
                        <SelectContent>
                          {TIER_ICON_OPTIONS.map((option) => {
                            const OptionIcon = getTierIcon(option.key);
                            return (
                              <SelectItem key={option.key} value={option.key}>
                                <div className="flex items-center gap-2">
                                  <OptionIcon className="h-4 w-4" />
                                  {option.label}
                                </div>
                              </SelectItem>
                            );
                          })}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* Badge Color */}
                    <div className="space-y-2 md:col-span-2">
                      <Label htmlFor={`tier-badge-${index}`}>Badge Style</Label>
                      <Select
                        value={tier.badgeClass}
                        onValueChange={(value) => handleTierChange(index, 'badgeClass', value)}
                      >
                        <SelectTrigger id={`tier-badge-${index}`}>
                          <SelectValue placeholder="Select color" />
                        </SelectTrigger>
                        <SelectContent>
                          {BADGE_COLOR_PRESETS.map((preset) => (
                            <SelectItem key={preset.label} value={preset.badgeClass}>
                              <div className="flex items-center gap-2">
                                <div className={`w-4 h-4 rounded ${preset.badgeClass}`} />
                                {preset.label}
                              </div>
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* Preview */}
                    <div className="space-y-2 md:col-span-2 flex flex-col">
                      <Label>Preview</Label>
                      <div className="flex-1 flex items-center">
                        <Badge className={`px-3 py-1.5 rounded-md text-sm flex items-center gap-2 border ${tier.badgeClass}`}>
                          <IconComponent className="h-4 w-4" />
                          {tier.label || 'Tier Name'}
                        </Badge>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Add Tier Button */}
      <Button variant="outline" onClick={handleAddTier} className="w-full border-dashed">
        <Plus className="h-4 w-4 mr-2" />
        Add Tier
      </Button>

      {/* Info Card */}
      <Card className="bg-muted/50">
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Users className="h-5 w-5" />
            How Member Tiers Work
          </CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground space-y-2">
          <p>
            Member tiers are automatically assigned based on how long a member has been active.
            The tier badge appears on member profiles and in the member directory.
          </p>
          <ul className="list-disc list-inside space-y-1">
            <li>Tiers are matched based on membership duration in years</li>
            <li>Each tier should have non-overlapping year ranges</li>
            <li>The last tier typically uses a high max value (e.g., 999) to catch all long-term members</li>
          </ul>
        </CardContent>
      </Card>

      {/* Reset Confirmation Dialog */}
      <AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-destructive" />
              Reset Tiers to Defaults?
            </AlertDialogTitle>
            <AlertDialogDescription>
              This will delete all custom tier configurations and restore the default member tiers.
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleReset}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              Reset to Defaults
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default AdminMemberTiers;