/**
 * MediaSettings component - Media export configuration interface.
 *
 * @package GetMD
 * @since   0.5.0
 */

import { useState } from 'react';
import { Image, Settings2, Info } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Switch } from './ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
import { Button } from './ui/button';

export interface MediaSettingsValues {
  enable_media_export: boolean;
  include_featured_images: boolean;
  include_inline_images: boolean;
  include_galleries: boolean;
  include_attachments: boolean;
  download_external_images: boolean;
  optimize_images: boolean;
  image_size: 'thumbnail' | 'medium' | 'medium_large' | 'large' | 'full';
  max_width: number;
  max_height: number;
  quality: number;
}

interface MediaSettingsProps {
  settings: MediaSettingsValues;
  onChange: (settings: MediaSettingsValues) => void;
  disabled?: boolean;
}

export function MediaSettings({ settings, onChange, disabled = false }: MediaSettingsProps) {
  const { i18n } = window.summixGetmdData || {};
  const [isOptimizationOpen, setIsOptimizationOpen] = useState(false);

  const updateSetting = <K extends keyof MediaSettingsValues>(
    key: K,
    value: MediaSettingsValues[K]
  ) => {
    onChange({ ...settings, [key]: value });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="smx-flex smx-items-center smx-gap-2">
          <Image className="smx-w-5 smx-h-5" />
          {i18n?.mediaSettingsTitle || 'Media Export'}
        </CardTitle>
        <CardDescription>
          {i18n?.mediaSettingsDesc || 'Bundle images and media files with your export'}
        </CardDescription>
      </CardHeader>
      <CardContent className="smx-space-y-6">
        {/* Master Toggle */}
        <div className="smx-flex smx-items-center smx-justify-between">
          <div className="smx-space-y-0.5">
            <label className="smx-text-sm smx-font-medium">
              {i18n?.enableMediaExport || 'Enable media export'}
            </label>
            <p className="smx-text-xs smx-text-muted-foreground">
              {i18n?.enableMediaExportDesc || 'Download and bundle media files with markdown'}
            </p>
          </div>
          <Switch
            checked={settings.enable_media_export}
            onCheckedChange={(checked) => updateSetting('enable_media_export', checked)}
            disabled={disabled}
          />
        </div>

        {/* Media Inclusion Options */}
        {settings.enable_media_export && (
          <>
            <div className="smx-space-y-4 smx-pt-4 smx-border-t">
              <h4 className="smx-text-sm smx-font-medium">
                {i18n?.whatToInclude || 'What to include'}
              </h4>

              {/* Featured Images */}
              <div className="smx-flex smx-items-center smx-justify-between">
                <label className="smx-text-sm">
                  {i18n?.featuredImages || 'Featured images'}
                </label>
                <Switch
                  checked={settings.include_featured_images}
                  onCheckedChange={(checked) => updateSetting('include_featured_images', checked)}
                  disabled={disabled}
                />
              </div>

              {/* Inline Images */}
              <div className="smx-flex smx-items-center smx-justify-between">
                <label className="smx-text-sm">
                  {i18n?.inlineImages || 'Content images'}
                </label>
                <Switch
                  checked={settings.include_inline_images}
                  onCheckedChange={(checked) => updateSetting('include_inline_images', checked)}
                  disabled={disabled}
                />
              </div>

              {/* Gallery Images */}
              <div className="smx-flex smx-items-center smx-justify-between">
                <label className="smx-text-sm">
                  {i18n?.galleryImages || 'Gallery images'}
                </label>
                <Switch
                  checked={settings.include_galleries}
                  onCheckedChange={(checked) => updateSetting('include_galleries', checked)}
                  disabled={disabled}
                />
              </div>

              {/* Attachments */}
              <div className="smx-flex smx-items-center smx-justify-between">
                <div className="smx-space-y-0.5">
                  <label className="smx-text-sm">
                    {i18n?.attachmentPosts || 'Attachment posts'}
                  </label>
                  <p className="smx-text-xs smx-text-muted-foreground">
                    {i18n?.attachmentPostsDesc || 'Export media library items as posts'}
                  </p>
                </div>
                <Switch
                  checked={settings.include_attachments}
                  onCheckedChange={(checked) => updateSetting('include_attachments', checked)}
                  disabled={disabled}
                />
              </div>

              {/* External Images */}
              <div className="smx-flex smx-items-center smx-justify-between">
                <div className="smx-space-y-0.5 smx-flex-1">
                  <label className="smx-text-sm">
                    {i18n?.externalImages || 'External images'}
                  </label>
                  <p className="smx-text-xs smx-text-muted-foreground">
                    {i18n?.externalImagesDesc || 'Download images from external domains'}
                  </p>
                </div>
                <Switch
                  checked={settings.download_external_images}
                  onCheckedChange={(checked) => updateSetting('download_external_images', checked)}
                  disabled={disabled}
                />
              </div>
            </div>

            {/* Image Size Selection */}
            <div className="smx-space-y-2 smx-pt-4 smx-border-t">
              <label className="smx-text-sm smx-font-medium">
                {i18n?.imageSize || 'Image size'}
              </label>
              <Select
                value={settings.image_size}
                onValueChange={(value) =>
                  updateSetting('image_size', value as MediaSettingsValues['image_size'])
                }
                disabled={disabled}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="thumbnail">{i18n?.sizeThumbnail || 'Thumbnail'}</SelectItem>
                  <SelectItem value="medium">{i18n?.sizeMedium || 'Medium'}</SelectItem>
                  <SelectItem value="medium_large">{i18n?.sizeMediumLarge || 'Medium Large'}</SelectItem>
                  <SelectItem value="large">{i18n?.sizeLarge || 'Large'}</SelectItem>
                  <SelectItem value="full">{i18n?.sizeFull || 'Full (Original)'}</SelectItem>
                </SelectContent>
              </Select>
              <p className="smx-text-xs smx-text-muted-foreground">
                {i18n?.imageSizeDesc || 'WordPress image size to use for downloads'}
              </p>
            </div>

            {/* Optimization Settings (Collapsible) */}
            <Collapsible
              open={isOptimizationOpen}
              onOpenChange={setIsOptimizationOpen}
              className="smx-space-y-2 smx-pt-4 smx-border-t"
            >
              <div className="smx-flex smx-items-center smx-justify-between">
                <div className="smx-space-y-0.5 smx-flex-1">
                  <label className="smx-text-sm smx-font-medium">
                    {i18n?.optimizeImages || 'Optimize images'}
                  </label>
                  <p className="smx-text-xs smx-text-muted-foreground">
                    {i18n?.optimizeImagesDesc || 'Resize and compress images to reduce file size'}
                  </p>
                </div>
                <div className="smx-flex smx-items-center smx-gap-2">
                  <Switch
                    checked={settings.optimize_images}
                    onCheckedChange={(checked) => updateSetting('optimize_images', checked)}
                    disabled={disabled}
                  />
                  {settings.optimize_images && (
                    <CollapsibleTrigger asChild>
                      <Button variant="ghost" size="sm" className="smx-h-8 smx-w-8 smx-p-0">
                        <Settings2 className="smx-h-4 smx-w-4" />
                      </Button>
                    </CollapsibleTrigger>
                  )}
                </div>
              </div>

              {settings.optimize_images && (
                <CollapsibleContent className="smx-space-y-4 smx-pt-4">
                  {/* Max Width */}
                  <div className="smx-space-y-2">
                    <label className="smx-text-sm">
                      {i18n?.maxWidth || 'Max width'} (px)
                    </label>
                    <input
                      type="number"
                      min="100"
                      max="10000"
                      value={settings.max_width}
                      onChange={(e) => updateSetting('max_width', parseInt(e.target.value) || 2048)}
                      disabled={disabled}
                      className="smx-flex smx-h-9 smx-w-full smx-rounded-md smx-border smx-border-input smx-bg-transparent smx-px-3 smx-py-1 smx-text-sm smx-shadow-sm smx-transition-colors file:smx-border-0 file:smx-bg-transparent file:smx-text-sm file:smx-font-medium placeholder:smx-text-muted-foreground focus-visible:smx-outline-none focus-visible:smx-ring-1 focus-visible:smx-ring-ring disabled:smx-cursor-not-allowed disabled:smx-opacity-50"
                    />
                  </div>

                  {/* Max Height */}
                  <div className="smx-space-y-2">
                    <label className="smx-text-sm">
                      {i18n?.maxHeight || 'Max height'} (px)
                    </label>
                    <input
                      type="number"
                      min="100"
                      max="10000"
                      value={settings.max_height}
                      onChange={(e) => updateSetting('max_height', parseInt(e.target.value) || 2048)}
                      disabled={disabled}
                      className="smx-flex smx-h-9 smx-w-full smx-rounded-md smx-border smx-border-input smx-bg-transparent smx-px-3 smx-py-1 smx-text-sm smx-shadow-sm smx-transition-colors file:smx-border-0 file:smx-bg-transparent file:smx-text-sm file:smx-font-medium placeholder:smx-text-muted-foreground focus-visible:smx-outline-none focus-visible:smx-ring-1 focus-visible:smx-ring-ring disabled:smx-cursor-not-allowed disabled:smx-opacity-50"
                    />
                  </div>

                  {/* Quality */}
                  <div className="smx-space-y-2">
                    <div className="smx-flex smx-items-center smx-justify-between">
                      <label className="smx-text-sm">
                        {i18n?.quality || 'Quality'}
                      </label>
                      <span className="smx-text-sm smx-font-medium">{settings.quality}%</span>
                    </div>
                    <input
                      type="range"
                      min="1"
                      max="100"
                      value={settings.quality}
                      onChange={(e) => updateSetting('quality', parseInt(e.target.value))}
                      disabled={disabled}
                      className="smx-w-full"
                    />
                    <p className="smx-text-xs smx-text-muted-foreground">
                      {i18n?.qualityDesc || 'Higher quality = larger file size'}
                    </p>
                  </div>
                </CollapsibleContent>
              )}
            </Collapsible>

            {/* Info Note */}
            <div className="smx-flex smx-gap-2 smx-p-3 smx-rounded-lg smx-bg-muted/50">
              <Info className="smx-w-4 smx-h-4 smx-text-muted-foreground smx-flex-shrink-0 smx-mt-0.5" />
              <p className="smx-text-xs smx-text-muted-foreground">
                {i18n?.mediaNote || 'Media files are organized in a /media directory and referenced with relative paths in your markdown.'}
              </p>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
}