"use client";

import { Settings, Play, Info, Loader } from "lucide-react";
import { OptimizationOptions } from "../types";

interface OptimizationSettingsProps {
  options: OptimizationOptions;
  onOptionsChange: (options: OptimizationOptions) => void;
  onStartProcessing: () => void;
  isProcessing: boolean;
  fileCount: number;
}

export default function OptimizationSettings({
  options,
  onOptionsChange,
  onStartProcessing,
  isProcessing,
  fileCount,
}: OptimizationSettingsProps) {
  const updateOptions = (updates: Partial<OptimizationOptions>) => {
    onOptionsChange({ ...options, ...updates });
  };

  const previewNaming = () => {
    if (!options.namingTemplate) return "example-image";

    const keywords = options.seoKeywords
      .split(",")
      .map((k) => k.trim())
      .filter((k) => k);

    return options.namingTemplate
      .replace(/{name}/g, "example-image")
      .replace(/{keyword}/g, keywords[0] || "keyword")
      .replace(/{keywords}/g, keywords.join("-") || "keywords")
      .replace(/{timestamp}/g, Date.now().toString())
      .replace(/{date}/g, new Date().toISOString().split("T")[0])
      .toLowerCase()
      .replace(/[^a-z0-9-]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "");
  };

  return (
    <div className="bg-white rounded-2xl shadow-lg p-8">
      <div className="flex items-center mb-6">
        <Settings className="w-6 h-6 text-gray-700 mr-3" />
        <h2 className="text-2xl font-bold text-gray-900">Optimization Settings</h2>
      </div>

      <div className="space-y-6">
        {/* Format & Quality */}
        <div className="grid md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Output Format
            </label>
            <select
              value={options.format}
              onChange={(e) => updateOptions({ format: e.target.value as any })}
              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            >
              <option value="webp">WebP (Recommended - Best compression)</option>
              <option value="avif">AVIF (Next-gen format - Smallest files)</option>
              <option value="jpeg">JPEG (Universal compatibility)</option>
              <option value="png">PNG (Lossless quality)</option>
            </select>
            <p className="text-xs text-gray-500 mt-1">
              WebP provides 25-35% better compression than JPEG. AVIF is even
              smaller but has limited browser support.
            </p>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Quality: {options.quality}%
              <span className="text-xs text-gray-500 ml-2">
                (
                {options.quality >= 90
                  ? "Highest"
                  : options.quality >= 70
                  ? "High"
                  : options.quality >= 50
                  ? "Medium"
                  : "Low"}
                )
              </span>
            </label>
            <input
              type="range"
              min="10"
              max="100"
              step="5"
              value={options.quality}
              onChange={(e) => updateOptions({ quality: Number(e.target.value) })}
              className="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              style={{
                background:
                  "linear-gradient(to right, #ef4444 0%, #f59e0b 50%, #10b981 100%)",
              }}
            />
            <div className="flex justify-between text-xs text-gray-500 mt-1">
              <span>Smaller file</span>
              <span>Better quality</span>
            </div>
          </div>
        </div>

        {/* SEO Naming */}
        <div className="bg-blue-50 rounded-xl p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <Info className="w-5 h-5 text-blue-500 mr-2" />
            SEO-Friendly Naming
          </h3>

          <div className="grid md:grid-cols-2 gap-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Naming Template
              </label>
              <input
                type="text"
                value={options.namingTemplate}
                onChange={(e) =>
                  updateOptions({ namingTemplate: e.target.value })
                }
                placeholder="{name}-{keyword}-optimized"
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              <div className="text-xs text-gray-500 mt-1 space-y-1">
                <p>• <code>{`{name}`}</code> - Original filename</p>
                <p>• <code>{`{keyword}`}</code> - First SEO keyword</p>
                <p>• <code>{`{keywords}`}</code> - All keywords joined</p>
                <p>• <code>{`{date}`}</code> - Current date (YYYY-MM-DD)</p>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                SEO Keywords
              </label>
              <input
                type="text"
                value={options.seoKeywords}
                onChange={(e) =>
                  updateOptions({ seoKeywords: e.target.value })
                }
                placeholder="product, website, brand, ecommerce"
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              <p className="text-xs text-gray-500 mt-1">
                Comma-separated keywords for SEO optimization
              </p>
            </div>
          </div>

          <div className="bg-white rounded-lg p-3 border border-blue-200">
            <p className="text-xs text-gray-600 mb-1">Preview filename:</p>
            <p className="text-sm font-mono text-blue-700">
              {previewNaming()}.{options.format === "jpeg" ? "jpg" : options.format}
            </p>
          </div>
        </div>

        {/* Advanced Options */}
        <div className="flex items-center justify-between pt-4 border-t border-gray-200">
          <label className="flex items-center">
            <input
              type="checkbox"
              checked={options.preserveMetadata}
              onChange={(e) =>
                updateOptions({ preserveMetadata: e.target.checked })
              }
              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
            />
            <span className="ml-2 text-sm text-gray-700">
              Preserve EXIF metadata
            </span>
          </label>

          <button
            onClick={onStartProcessing}
            disabled={isProcessing || fileCount === 0}
            className="flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-105 disabled:transform-none"
          >
            {isProcessing ? (
              <>
                <Loader className="w-4 h-4 animate-spin" />
                <span>Processing...</span>
              </>
            ) : (
              <>
                <Play className="w-4 h-4" />
                <span>Optimize {fileCount} Images</span>
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}