/**
 * Globals Panel — left-side panel with Colors & Typography token lists
 *
 * Two tabs: Colors | Typography
 * Each shows a scrollable list of tokens with inline editors.
 */

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Palette, Type, Plus } from 'lucide-react'
import { GlobalStyles, GlobalColor, GlobalTypography } from '../config'
import { ColorEditor } from './color-editor'
import { TypographyEditor } from './typography-editor'

interface GlobalsPanelProps {
  settings: GlobalStyles
  onChange: (updated: GlobalStyles) => void
}

/** Generate a unique slug from a name */
function slugify(name: string): string {
  return name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '')
    || `token-${Date.now()}`
}

export function GlobalsPanel({ settings, onChange }: GlobalsPanelProps) {
  const [activeTab, setActiveTab] = useState<'colors' | 'typography'>('colors')

  /* ── Color helpers ──────────────────────────────────────── */

  const updateColor = (index: number, updated: GlobalColor) => {
    const next = [...settings.colors]
    next[index] = updated
    onChange({ ...settings, colors: next })
  }

  const addColor = () => {
    const newColor: GlobalColor = {
      id: slugify(`custom-${settings.colors.length + 1}`),
      name: `Custom ${settings.colors.length + 1}`,
      value: '#6366f1',
      isDefault: false,
    }
    onChange({ ...settings, colors: [...settings.colors, newColor] })
  }

  const deleteColor = (index: number) => {
    const next = settings.colors.filter((_: GlobalColor, i: number) => i !== index)
    onChange({ ...settings, colors: next })
  }

  /* ── Typography helpers ─────────────────────────────────── */

  const updateTypography = (index: number, updated: GlobalTypography) => {
    const next = [...settings.typography]
    next[index] = updated
    onChange({ ...settings, typography: next })
  }

  const addTypography = () => {
    const newTypo: GlobalTypography = {
      id: slugify(`custom-font-${settings.typography.length + 1}`),
      name: `Custom Font ${settings.typography.length + 1}`,
      fontFamily: '',
      fontWeight: '400',
      fontSize: '',
      lineHeight: '',
      letterSpacing: '',
      textTransform: 'none',
      isDefault: false,
    }
    onChange({ ...settings, typography: [...settings.typography, newTypo] })
  }

  const deleteTypography = (index: number) => {
    const next = settings.typography.filter((_: GlobalTypography, i: number) => i !== index)
    onChange({ ...settings, typography: next })
  }

  return (
    <div className="flex flex-col h-full">
      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'colors' | 'typography')} className="flex flex-col h-full">
        <TabsList className="grid w-full grid-cols-2 shrink-0">
          <TabsTrigger value="colors" className="gap-1.5">
            <Palette className="h-3.5 w-3.5" />
            Colors
          </TabsTrigger>
          <TabsTrigger value="typography" className="gap-1.5">
            <Type className="h-3.5 w-3.5" />
            Typography
          </TabsTrigger>
        </TabsList>

        {/* ── Colors ──────────────────────────────────────── */}
        <TabsContent value="colors" className="flex-1 mt-4 overflow-hidden">
          <ScrollArea className="h-[calc(100vh-320px)]">
            <div className="space-y-3 pr-3">
              {settings.colors.map((color: GlobalColor, index: number) => (
                <ColorEditor
                  key={color.id}
                  color={color}
                  onChange={(updated) => updateColor(index, updated)}
                  onDelete={!color.isDefault ? () => deleteColor(index) : undefined}
                />
              ))}
              <Button
                variant="outline"
                size="sm"
                onClick={addColor}
                className="w-full gap-2"
              >
                <Plus className="h-3.5 w-3.5" />
                Add Color
              </Button>
            </div>
          </ScrollArea>
        </TabsContent>

        {/* ── Typography ──────────────────────────────────── */}
        <TabsContent value="typography" className="flex-1 mt-4 overflow-hidden">
          <ScrollArea className="h-[calc(100vh-320px)]">
            <div className="space-y-3 pr-3">
              {settings.typography.map((typo: GlobalTypography, index: number) => (
                <TypographyEditor
                  key={typo.id}
                  typography={typo}
                  onChange={(updated) => updateTypography(index, updated)}
                  onDelete={!typo.isDefault ? () => deleteTypography(index) : undefined}
                />
              ))}
              <Button
                variant="outline"
                size="sm"
                onClick={addTypography}
                className="w-full gap-2"
              >
                <Plus className="h-3.5 w-3.5" />
                Add Typography
              </Button>
            </div>
          </ScrollArea>
        </TabsContent>
      </Tabs>
    </div>
  )
}