import { HelpCircle, X } from 'lucide-react';

import { useState } from 'react';

import { Head, router, useForm } from '@inertiajs/react';

import SiteNav from '@/Components/Navigation/SiteNav';
import { Button } from '@/Components/ui/button';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
import { Input } from '@/Components/ui/input';
import { LoadingButton } from '@/Components/ui/loading-button';
import { Slider } from '@/Components/ui/slider';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { useUnsavedChanges } from '@/hooks/useUnsavedChanges';
import DashboardLayout from '@/Layouts/DashboardLayout';
import type { SiteBasic } from '@/types';

interface Settings {
  recommendations_enabled: boolean;
  topic_clusters_enabled: boolean;
  freshness_enabled: boolean;
  cannibalization_enabled: boolean;
  min_traffic: number;
  min_confidence: number;
  min_impact: number;
  exclusion_patterns: string[];
  sensitive_pages: string[];
}

interface Defaults {
  recommendations_enabled: boolean;
  topic_clusters_enabled: boolean;
  freshness_enabled: boolean;
  cannibalization_enabled: boolean;
  min_traffic: number;
  min_confidence: number;
  min_impact: number;
  exclusion_patterns: string[];
  sensitive_pages: string[];
}

interface Preset {
  min_traffic: number;
  min_confidence: number;
  min_impact: number;
}

interface Presets {
  conservative: Preset;
  balanced: Preset;
  aggressive: Preset;
}

interface Props {
  site: SiteBasic;
  settings: Settings | null;
  defaults: Defaults;
  presets: Presets;
}

function LabelWithTooltip({
  htmlFor,
  label,
  tooltip,
}: {
  htmlFor: string;
  label: string;
  tooltip: string;
}) {
  return (
    <div className="flex items-center gap-1">
      <label htmlFor={htmlFor} className="text-sm font-medium">
        {label}
      </label>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <HelpCircle className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
          </TooltipTrigger>
          <TooltipContent side="right" className="max-w-xs">
            <p className="text-sm">{tooltip}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}

export default function SiteAnalysisSettings({ site, settings, defaults, presets }: Props) {
  const [showReset, setShowReset] = useState(false);
  const [newExclusionPattern, setNewExclusionPattern] = useState('');
  const [newSensitivePage, setNewSensitivePage] = useState('');

  const { data, setData, put, processing, errors, isDirty } = useForm({
    recommendations_enabled: settings?.recommendations_enabled ?? defaults.recommendations_enabled,
    topic_clusters_enabled: settings?.topic_clusters_enabled ?? defaults.topic_clusters_enabled,
    freshness_enabled: settings?.freshness_enabled ?? defaults.freshness_enabled,
    cannibalization_enabled: settings?.cannibalization_enabled ?? defaults.cannibalization_enabled,
    min_traffic: settings?.min_traffic ?? defaults.min_traffic,
    min_confidence: settings?.min_confidence ?? defaults.min_confidence,
    min_impact: settings?.min_impact ?? defaults.min_impact,
    exclusion_patterns: settings?.exclusion_patterns ?? defaults.exclusion_patterns,
    sensitive_pages: settings?.sensitive_pages ?? defaults.sensitive_pages,
  });

  useUnsavedChanges(isDirty);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    put(route('sites.settings.analysis.update', site.id));
  };

  const handleReset = () => setShowReset(true);

  const applyPreset = (presetName: 'conservative' | 'balanced' | 'aggressive') => {
    const preset = presets[presetName];
    setData({
      ...data,
      min_traffic: preset.min_traffic,
      min_confidence: preset.min_confidence,
      min_impact: preset.min_impact,
    });
  };

  const addExclusionPattern = () => {
    if (
      newExclusionPattern.trim() &&
      !data.exclusion_patterns.includes(newExclusionPattern.trim())
    ) {
      setData('exclusion_patterns', [...data.exclusion_patterns, newExclusionPattern.trim()]);
      setNewExclusionPattern('');
    }
  };

  const removeExclusionPattern = (pattern: string) => {
    setData(
      'exclusion_patterns',
      data.exclusion_patterns.filter((p) => p !== pattern),
    );
  };

  const addSensitivePage = () => {
    if (newSensitivePage.trim() && !data.sensitive_pages.includes(newSensitivePage.trim())) {
      setData('sensitive_pages', [...data.sensitive_pages, newSensitivePage.trim()]);
      setNewSensitivePage('');
    }
  };

  const removeSensitivePage = (page: string) => {
    setData(
      'sensitive_pages',
      data.sensitive_pages.filter((p) => p !== page),
    );
  };

  return (
    <>
      <Head title={`${site.name} - Analysis Settings`} />

      <div className="container py-6">
        <SiteNav
          siteId={site.id}
          canAnalyze
          canRecommend
          canCannibalization
          canOpportunityMap
          canGeographic
          canDevice
        />

        <h1 className="text-2xl font-bold tracking-tight">Analysis Settings</h1>
        <p className="text-muted-foreground mt-1">
          Configure analysis settings and thresholds for {site.name}.
        </p>

        <form onSubmit={handleSubmit} className="max-w-2xl space-y-6 mt-6">
          {/* Feature Toggles */}
          <div className="space-y-3">
            <h2 className="text-lg font-semibold">Feature Toggles</h2>
            <p className="text-sm text-muted-foreground">
              Enable or disable each analysis type independently.
            </p>

            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="recommendations_enabled"
                  checked={data.recommendations_enabled}
                  onChange={(e) => setData('recommendations_enabled', e.target.checked)}
                  className="rounded border-input"
                />
                <label htmlFor="recommendations_enabled" className="text-sm font-medium">
                  Enable Recommendations
                </label>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="topic_clusters_enabled"
                  checked={data.topic_clusters_enabled}
                  onChange={(e) => setData('topic_clusters_enabled', e.target.checked)}
                  className="rounded border-input"
                />
                <label htmlFor="topic_clusters_enabled" className="text-sm font-medium">
                  Enable Topic Clusters
                </label>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="freshness_enabled"
                  checked={data.freshness_enabled}
                  onChange={(e) => setData('freshness_enabled', e.target.checked)}
                  className="rounded border-input"
                />
                <label htmlFor="freshness_enabled" className="text-sm font-medium">
                  Enable Freshness Analysis
                </label>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="cannibalization_enabled"
                  checked={data.cannibalization_enabled}
                  onChange={(e) => setData('cannibalization_enabled', e.target.checked)}
                  className="rounded border-input"
                />
                <label htmlFor="cannibalization_enabled" className="text-sm font-medium">
                  Enable Cannibalization Detection
                </label>
              </div>
            </div>
            {errors.recommendations_enabled && (
              <p className="text-sm text-destructive mt-1">{errors.recommendations_enabled}</p>
            )}
          </div>

          {/* Threshold Presets */}
          <div className="space-y-3">
            <h2 className="text-lg font-semibold">Threshold Presets</h2>
            <p className="text-sm text-muted-foreground">
              Quick presets for different analysis sensitivities.
            </p>

            <div className="flex gap-2">
              <Button type="button" variant="outline" onClick={() => applyPreset('conservative')}>
                Conservative
              </Button>
              <Button type="button" variant="outline" onClick={() => applyPreset('balanced')}>
                Balanced
              </Button>
              <Button type="button" variant="outline" onClick={() => applyPreset('aggressive')}>
                Aggressive
              </Button>
            </div>
          </div>

          {/* Custom Thresholds */}
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">Custom Thresholds</h2>
            <p className="text-sm text-muted-foreground">
              Fine-tune thresholds for surfacing opportunities.
            </p>

            <div>
              <LabelWithTooltip
                htmlFor="min-traffic"
                label={`Minimum Traffic (${data.min_traffic})`}
                tooltip="Minimum number of monthly clicks required for a page to be analyzed. Lower values surface more opportunities but may include low-impact pages."
              />
              <Input
                id="min-traffic"
                type="number"
                min={0}
                max={100000}
                value={data.min_traffic}
                onChange={(e) => setData('min_traffic', parseInt(e.target.value) || 0)}
                className="mt-1"
                aria-invalid={!!errors.min_traffic}
                aria-describedby={errors.min_traffic ? 'min-traffic-error' : undefined}
              />
              {errors.min_traffic && (
                <p id="min-traffic-error" className="text-sm text-destructive mt-1">
                  {errors.min_traffic}
                </p>
              )}
            </div>

            <div>
              <LabelWithTooltip
                htmlFor="min-confidence"
                label={`Minimum Confidence (${data.min_confidence}%)`}
                tooltip="Minimum confidence score (0-100) required to surface a recommendation. Higher values mean fewer but higher-quality suggestions."
              />
              <Slider
                id="min-confidence"
                min={0}
                max={100}
                step={5}
                value={[data.min_confidence]}
                onValueChange={([value]) => setData('min_confidence', value)}
                className="mt-2"
              />
              {errors.min_confidence && (
                <p className="text-sm text-destructive mt-1">{errors.min_confidence}</p>
              )}
            </div>

            <div>
              <LabelWithTooltip
                htmlFor="min-impact"
                label={`Minimum Impact (${data.min_impact}%)`}
                tooltip="Minimum expected impact score (0-100) required to surface a recommendation. Higher values filter out low-impact suggestions."
              />
              <Slider
                id="min-impact"
                min={0}
                max={100}
                step={5}
                value={[data.min_impact]}
                onValueChange={([value]) => setData('min_impact', value)}
                className="mt-2"
              />
              {errors.min_impact && (
                <p className="text-sm text-destructive mt-1">{errors.min_impact}</p>
              )}
            </div>
          </div>

          {/* Exclusion Patterns */}
          <div className="space-y-3">
            <h2 className="text-lg font-semibold">Exclusion Patterns</h2>
            <p className="text-sm text-muted-foreground">
              URL patterns to exclude from analysis (e.g., /admin/*, /cart, *.pdf).
            </p>

            <div className="flex gap-2">
              <Input
                value={newExclusionPattern}
                onChange={(e) => setNewExclusionPattern(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    addExclusionPattern();
                  }
                }}
                placeholder="/admin/*, *.pdf, etc."
                className="flex-1"
              />
              <Button type="button" onClick={addExclusionPattern} variant="outline">
                Add
              </Button>
            </div>

            {data.exclusion_patterns.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {data.exclusion_patterns.map((pattern) => (
                  <div
                    key={pattern}
                    className="inline-flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded text-sm"
                  >
                    <span>{pattern}</span>
                    <button
                      type="button"
                      onClick={() => removeExclusionPattern(pattern)}
                      className="hover:text-destructive rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </div>
                ))}
              </div>
            )}
            {errors.exclusion_patterns && (
              <p className="text-sm text-destructive mt-1">{errors.exclusion_patterns}</p>
            )}
          </div>

          {/* Sensitive Pages */}
          <div className="space-y-3">
            <h2 className="text-lg font-semibold">Sensitive Pages</h2>
            <p className="text-sm text-muted-foreground">
              Pages that require extra confirmation before applying recommendations.
            </p>

            <div className="flex gap-2">
              <Input
                value={newSensitivePage}
                onChange={(e) => setNewSensitivePage(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    addSensitivePage();
                  }
                }}
                placeholder="/pricing, /contact, etc."
                className="flex-1"
              />
              <Button type="button" onClick={addSensitivePage} variant="outline">
                Add
              </Button>
            </div>

            {data.sensitive_pages.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {data.sensitive_pages.map((page) => (
                  <div
                    key={page}
                    className="inline-flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded text-sm"
                  >
                    <span>{page}</span>
                    <button
                      type="button"
                      onClick={() => removeSensitivePage(page)}
                      className="hover:text-destructive rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </div>
                ))}
              </div>
            )}
            {errors.sensitive_pages && (
              <p className="text-sm text-destructive mt-1">{errors.sensitive_pages}</p>
            )}
          </div>

          <div className="flex gap-2 pt-2">
            <LoadingButton loading={processing}>Save Settings</LoadingButton>
            <Button type="button" variant="outline" onClick={handleReset}>
              Reset to Defaults
            </Button>
          </div>
        </form>

        <ConfirmDialog
          open={showReset}
          onOpenChange={setShowReset}
          title="Reset analysis settings?"
          description="This will reset significance thresholds, exclusion patterns, and feature toggles to system defaults. Existing analysis runs are not affected."
          confirmLabel="Reset to Defaults"
          variant="default"
          onConfirm={() => router.delete(route('sites.settings.analysis.reset', site.id))}
        />
      </div>
    </>
  );
}

SiteAnalysisSettings.layout = (page: React.ReactNode) => <DashboardLayout children={page} />;