import React, { useEffect, useState, useCallback } from 'react';
import api from '../../utils/api';
import { useAuth } from '../../context/AuthContext';
import { useThemeConfig } from '../../context/ThemeConfigContext';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import { Textarea } from '../../components/ui/textarea';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '../../components/ui/alert-dialog';
import { toast } from 'sonner';
import { Palette, Upload, Trash2, RotateCcw, Save, Image, Globe, AlertTriangle } from 'lucide-react';

const AdminTheme = () => {
  const { user } = useAuth();
  const { refreshTheme, DEFAULT_THEME } = useThemeConfig();
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [uploadingLogo, setUploadingLogo] = useState(false);
  const [uploadingFavicon, setUploadingFavicon] = useState(false);
  const [showResetDialog, setShowResetDialog] = useState(false);
  const [themeData, setThemeData] = useState({
    site_name: '',
    site_short_name: '',
    site_description: '',
    logo_url: null,
    favicon_url: null,
    colors: {
      primary: '280 47% 27%',
      primary_foreground: '0 0% 100%',
      accent: '24 86% 55%',
      brand_purple: '256 35% 47%',
      brand_orange: '24 86% 55%',
      brand_lavender: '262 46% 80%'
    },
    meta_theme_color: '#664fa3'
  });
  const [originalData, setOriginalData] = useState(null);
  const [metadata, setMetadata] = useState({
    is_default: true,
    updated_at: null,
    updated_by: null
  });

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

  const fetchThemeSettings = useCallback(async () => {
    try {
      setLoading(true);
      const response = await api.get('/admin/settings/theme');
      const { config, is_default, updated_at, updated_by } = response.data;

      setThemeData(config);
      setOriginalData(config);
      setMetadata({ is_default, updated_at, updated_by });
    } catch (error) {
      toast.error('Failed to fetch theme settings');
      console.error('Fetch theme error:', error);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleInputChange = (field, value) => {
    setThemeData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleColorChange = (colorKey, value) => {
    setThemeData(prev => ({
      ...prev,
      colors: {
        ...prev.colors,
        [colorKey]: value
      }
    }));
  };

  const handleSaveSettings = async () => {
    try {
      setSaving(true);

      // Build update payload with only changed fields
      const payload = {};

      if (themeData.site_name !== originalData?.site_name) {
        payload.site_name = themeData.site_name;
      }
      if (themeData.site_short_name !== originalData?.site_short_name) {
        payload.site_short_name = themeData.site_short_name;
      }
      if (themeData.site_description !== originalData?.site_description) {
        payload.site_description = themeData.site_description;
      }
      if (JSON.stringify(themeData.colors) !== JSON.stringify(originalData?.colors)) {
        payload.colors = themeData.colors;
      }
      if (themeData.meta_theme_color !== originalData?.meta_theme_color) {
        payload.meta_theme_color = themeData.meta_theme_color;
      }

      if (Object.keys(payload).length === 0) {
        toast.info('No changes to save');
        return;
      }

      await api.put('/admin/settings/theme', payload);

      toast.success('Theme settings saved successfully');

      // Refresh theme context and re-fetch settings
      await refreshTheme();
      await fetchThemeSettings();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to save theme settings');
      console.error('Save theme error:', error);
    } finally {
      setSaving(false);
    }
  };

  const handleLogoUpload = async (event) => {
    const file = event.target.files?.[0];
    if (!file) return;

    // Validate file type
    const allowedTypes = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'];
    if (!allowedTypes.includes(file.type)) {
      toast.error('Invalid file type. Please upload PNG, JPEG, WebP, or SVG.');
      return;
    }

    // Validate file size (5MB)
    if (file.size > 5 * 1024 * 1024) {
      toast.error('File too large. Maximum size is 5MB.');
      return;
    }

    try {
      setUploadingLogo(true);
      const formData = new FormData();
      formData.append('file', file);

      const response = await api.post('/admin/settings/theme/logo', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });

      setThemeData(prev => ({
        ...prev,
        logo_url: response.data.logo_url
      }));

      toast.success('Logo uploaded successfully');
      await refreshTheme();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to upload logo');
      console.error('Upload logo error:', error);
    } finally {
      setUploadingLogo(false);
      // Reset the input
      event.target.value = '';
    }
  };

  const handleFaviconUpload = async (event) => {
    const file = event.target.files?.[0];
    if (!file) return;

    // Validate file type
    const allowedTypes = ['image/x-icon', 'image/vnd.microsoft.icon', 'image/png', 'image/svg+xml'];
    if (!allowedTypes.includes(file.type)) {
      toast.error('Invalid file type. Please upload ICO, PNG, or SVG.');
      return;
    }

    // Validate file size (1MB)
    if (file.size > 1 * 1024 * 1024) {
      toast.error('File too large. Maximum size is 1MB.');
      return;
    }

    try {
      setUploadingFavicon(true);
      const formData = new FormData();
      formData.append('file', file);

      const response = await api.post('/admin/settings/theme/favicon', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });

      setThemeData(prev => ({
        ...prev,
        favicon_url: response.data.favicon_url
      }));

      toast.success('Favicon uploaded successfully');
      await refreshTheme();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to upload favicon');
      console.error('Upload favicon error:', error);
    } finally {
      setUploadingFavicon(false);
      // Reset the input
      event.target.value = '';
    }
  };

  const handleDeleteLogo = async () => {
    try {
      await api.delete('/admin/settings/theme/logo');

      setThemeData(prev => ({
        ...prev,
        logo_url: null
      }));

      toast.success('Logo deleted successfully');
      await refreshTheme();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to delete logo');
    }
  };

  const handleDeleteFavicon = async () => {
    try {
      await api.delete('/admin/settings/theme/favicon');

      setThemeData(prev => ({
        ...prev,
        favicon_url: null
      }));

      toast.success('Favicon deleted successfully');
      await refreshTheme();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to delete favicon');
    }
  };

  const handleResetToDefaults = async () => {
    try {
      await api.post('/admin/settings/theme/reset');

      toast.success('Theme reset to defaults');
      setShowResetDialog(false);

      await refreshTheme();
      await fetchThemeSettings();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to reset theme');
    }
  };

  // Convert HSL string to approximate hex for color picker
  const hslToHex = (hslString) => {
    if (!hslString) return '#000000';

    const parts = hslString.split(' ');
    if (parts.length !== 3) return '#000000';

    const h = parseFloat(parts[0]) / 360;
    const s = parseFloat(parts[1]) / 100;
    const l = parseFloat(parts[2]) / 100;

    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };

    let r, g, b;
    if (s === 0) {
      r = g = b = l;
    } else {
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }

    const toHex = (x) => {
      const hex = Math.round(x * 255).toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    };

    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  };

  // Convert hex to HSL string
  const hexToHsl = (hex) => {
    if (!hex) return '0 0% 0%';

    // Remove # if present
    hex = hex.replace('#', '');

    const r = parseInt(hex.substring(0, 2), 16) / 255;
    const g = parseInt(hex.substring(2, 4), 16) / 255;
    const b = parseInt(hex.substring(4, 6), 16) / 255;

    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
        case g: h = ((b - r) / d + 2) / 6; break;
        case b: h = ((r - g) / d + 4) / 6; break;
        default: h = 0;
      }
    }

    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
  };

  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>
    );
  }

  const colorFields = [
    { key: 'primary', label: 'Primary Color', description: 'Main brand color used for buttons and highlights' },
    { key: 'primary_foreground', label: 'Primary Foreground', description: 'Text color on primary backgrounds' },
    { key: 'accent', label: 'Accent Color', description: 'Secondary highlight color' },
    { key: 'brand_purple', label: 'Brand Purple', description: 'Purple brand color' },
    { key: 'brand_orange', label: 'Brand Orange', description: 'Orange brand color' },
    { key: 'brand_lavender', label: 'Brand Lavender', description: 'Lavender brand color' }
  ];

  return (
    <div className="space-y-6">
      {/* Action Buttons */}
      <div className="flex items-center justify-between">
        <p className="text-muted-foreground">
          Customize the appearance of your membership site
        </p>
        <div className="flex items-center gap-2">
          {isSuperAdmin && (
            <Button
              variant="outline"
              onClick={() => setShowResetDialog(true)}
              className="text-destructive hover:text-destructive"
            >
              <RotateCcw className="h-4 w-4 mr-2" />
              Reset to Defaults
            </Button>
          )}
          <Button onClick={handleSaveSettings} disabled={saving}>
            <Save className="h-4 w-4 mr-2" />
            {saving ? 'Saving...' : 'Save Changes'}
          </Button>
        </div>
      </div>

      {/* Metadata Banner */}
      {!metadata.is_default && metadata.updated_at && (
        <div className="bg-muted/50 border rounded-lg px-4 py-3 text-sm text-muted-foreground">
          Last updated {new Date(metadata.updated_at).toLocaleDateString()}
          {metadata.updated_by && ` by ${metadata.updated_by}`}
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Branding Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Globe className="h-5 w-5" />
              Branding
            </CardTitle>
            <CardDescription>
              Configure your site name and brand identity
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Site Name */}
            <div className="space-y-2">
              <Label htmlFor="site_name">Site Name</Label>
              <Input
                id="site_name"
                value={themeData.site_name}
                onChange={(e) => handleInputChange('site_name', e.target.value)}
                placeholder="LOAF - Lesbians Over Age Fifty"
                maxLength={200}
              />
              <p className="text-xs text-muted-foreground">
                Displayed in the browser title and navigation
              </p>
            </div>

            {/* Short Name */}
            <div className="space-y-2">
              <Label htmlFor="site_short_name">Short Name</Label>
              <Input
                id="site_short_name"
                value={themeData.site_short_name}
                onChange={(e) => handleInputChange('site_short_name', e.target.value)}
                placeholder="LOAF"
                maxLength={50}
              />
              <p className="text-xs text-muted-foreground">
                Used for PWA home screen icon label
              </p>
            </div>

            {/* Site Description */}
            <div className="space-y-2">
              <Label htmlFor="site_description">Site Description</Label>
              <Textarea
                id="site_description"
                value={themeData.site_description}
                onChange={(e) => handleInputChange('site_description', e.target.value)}
                placeholder="A community organization for lesbians over age fifty..."
                maxLength={500}
                rows={3}
              />
              <p className="text-xs text-muted-foreground">
                Used for SEO meta description tag ({themeData.site_description?.length || 0}/500)
              </p>
            </div>

            {/* Meta Theme Color */}
            <div className="space-y-2">
              <Label htmlFor="meta_theme_color">Browser Theme Color</Label>
              <div className="flex items-center gap-2">
                <input
                  type="color"
                  id="meta_theme_color"
                  value={themeData.meta_theme_color}
                  onChange={(e) => handleInputChange('meta_theme_color', e.target.value)}
                  className="h-10 w-14 rounded border cursor-pointer"
                />
                <Input
                  value={themeData.meta_theme_color}
                  onChange={(e) => handleInputChange('meta_theme_color', e.target.value)}
                  placeholder="#664fa3"
                  className="flex-1"
                  maxLength={7}
                />
              </div>
              <p className="text-xs text-muted-foreground">
                Color shown in mobile browser address bar (PWA)
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Logo & Favicon Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Image className="h-5 w-5" />
              Logo & Favicon
            </CardTitle>
            <CardDescription>
              Upload your organization's logo and favicon
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Logo Upload */}
            <div className="space-y-3">
              <Label>Logo</Label>
              <div className="flex items-start gap-4">
                <div className="w-24 h-24 bg-muted rounded-lg flex items-center justify-center overflow-hidden border">
                  {themeData.logo_url ? (
                    <img
                      src={themeData.logo_url}
                      alt="Logo"
                      className="w-full h-full object-contain"
                    />
                  ) : (
                    <Image className="h-10 w-10 text-muted-foreground" />
                  )}
                </div>
                <div className="flex-1 space-y-2">
                  <div className="flex items-center gap-2">
                    <label className="cursor-pointer">
                      <input
                        type="file"
                        accept="image/png,image/jpeg,image/webp,image/svg+xml"
                        onChange={handleLogoUpload}
                        className="hidden"
                        disabled={uploadingLogo}
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        disabled={uploadingLogo}
                        asChild
                      >
                        <span>
                          <Upload className="h-4 w-4 mr-2" />
                          {uploadingLogo ? 'Uploading...' : 'Upload'}
                        </span>
                      </Button>
                    </label>
                    {themeData.logo_url && (
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={handleDeleteLogo}
                        className="text-destructive hover:text-destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground">
                    PNG, JPEG, WebP, or SVG. Max 5MB.
                  </p>
                </div>
              </div>
            </div>

            {/* Favicon Upload */}
            <div className="space-y-3">
              <Label>Favicon</Label>
              <div className="flex items-start gap-4">
                <div className="w-16 h-16 bg-muted rounded-lg flex items-center justify-center overflow-hidden border">
                  {themeData.favicon_url ? (
                    <img
                      src={themeData.favicon_url}
                      alt="Favicon"
                      className="w-8 h-8 object-contain"
                    />
                  ) : (
                    <Globe className="h-6 w-6 text-muted-foreground" />
                  )}
                </div>
                <div className="flex-1 space-y-2">
                  <div className="flex items-center gap-2">
                    <label className="cursor-pointer">
                      <input
                        type="file"
                        accept="image/x-icon,image/vnd.microsoft.icon,image/png,image/svg+xml"
                        onChange={handleFaviconUpload}
                        className="hidden"
                        disabled={uploadingFavicon}
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        disabled={uploadingFavicon}
                        asChild
                      >
                        <span>
                          <Upload className="h-4 w-4 mr-2" />
                          {uploadingFavicon ? 'Uploading...' : 'Upload'}
                        </span>
                      </Button>
                    </label>
                    {themeData.favicon_url && (
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={handleDeleteFavicon}
                        className="text-destructive hover:text-destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground">
                    ICO, PNG, or SVG. Max 1MB.
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Color Scheme Section */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Palette className="h-5 w-5" />
              Color Scheme
            </CardTitle>
            <CardDescription>
              Customize the color palette used throughout the site. Colors are stored as HSL values.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {colorFields.map((field) => (
                <div key={field.key} className="space-y-2">
                  <Label htmlFor={`color_${field.key}`}>{field.label}</Label>
                  <div className="flex items-center gap-2">
                    <input
                      type="color"
                      id={`color_${field.key}`}
                      value={hslToHex(themeData.colors[field.key])}
                      onChange={(e) => handleColorChange(field.key, hexToHsl(e.target.value))}
                      className="h-10 w-14 rounded border cursor-pointer"
                    />
                    <Input
                      value={themeData.colors[field.key]}
                      onChange={(e) => handleColorChange(field.key, e.target.value)}
                      placeholder="280 47% 27%"
                      className="flex-1 font-mono text-sm"
                    />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    {field.description}
                  </p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Preview Section */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Preview</CardTitle>
            <CardDescription>
              See how your theme changes will look
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div
              className="rounded-lg border p-6 space-y-4"
              style={{
                '--preview-primary': themeData.colors.primary,
                '--preview-accent': themeData.colors.accent,
                '--preview-brand-purple': themeData.colors.brand_purple,
                '--preview-brand-orange': themeData.colors.brand_orange,
                '--preview-brand-lavender': themeData.colors.brand_lavender,
              }}
            >
              <div className="flex items-center gap-4">
                {themeData.logo_url ? (
                  <img src={themeData.logo_url} alt="Preview Logo" className="h-16 w-16 object-contain" />
                ) : (
                  <div className="h-16 w-16 bg-muted rounded-lg flex items-center justify-center">
                    <Image className="h-8 w-8 text-muted-foreground" />
                  </div>
                )}
                <div>
                  <h3 className="text-xl font-bold">{themeData.site_name || 'Site Name'}</h3>
                  <p className="text-sm text-muted-foreground">{themeData.site_short_name || 'Short Name'}</p>
                  {themeData.site_description && (
                    <p className="text-xs text-muted-foreground mt-1 max-w-md">{themeData.site_description}</p>
                  )}
                </div>
              </div>

              <div className="flex flex-wrap gap-3 pt-4">
                <div
                  className="px-4 py-2 rounded-lg text-white font-medium"
                  style={{ backgroundColor: `hsl(${themeData.colors.primary})` }}
                >
                  Primary
                </div>
                <div
                  className="px-4 py-2 rounded-lg text-white font-medium"
                  style={{ backgroundColor: `hsl(${themeData.colors.accent})` }}
                >
                  Accent
                </div>
                <div
                  className="px-4 py-2 rounded-lg text-white font-medium"
                  style={{ backgroundColor: `hsl(${themeData.colors.brand_purple})` }}
                >
                  Brand Purple
                </div>
                <div
                  className="px-4 py-2 rounded-lg font-medium"
                  style={{ backgroundColor: `hsl(${themeData.colors.brand_orange})` }}
                >
                  Brand Orange
                </div>
                <div
                  className="px-4 py-2 rounded-lg font-medium"
                  style={{ backgroundColor: `hsl(${themeData.colors.brand_lavender})` }}
                >
                  Brand Lavender
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 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 Theme to Defaults?
            </AlertDialogTitle>
            <AlertDialogDescription>
              This will delete all custom theme settings including uploaded logo and favicon.
              The site will revert to the default LOAF theme. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleResetToDefaults}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              Reset to Defaults
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default AdminTheme;
