'use client'

import {
  PRIMARY_COLORS,
  ACCENT_COLORS,
  CATEGORY_COLORS,
  SEMANTIC_COLORS,
} from '../constants'
import { ColorSwatch } from './ColorSwatch'

export function ColorsTab() {
  return (
    <div className="space-y-6">
      {/* Primary Color */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-2">{PRIMARY_COLORS.name}</h3>
        <p className="text-sm text-slate-500 mb-4">{PRIMARY_COLORS.description}</p>
        <div className="flex gap-4 flex-wrap">
          {PRIMARY_COLORS.shades.map((shade) => (
            <ColorSwatch key={shade.name} color={shade} />
          ))}
        </div>
      </div>

      {/* Accent Color */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-2">{ACCENT_COLORS.name}</h3>
        <p className="text-sm text-slate-500 mb-4">{ACCENT_COLORS.description}</p>
        <div className="flex gap-4 flex-wrap">
          {ACCENT_COLORS.shades.map((shade) => (
            <ColorSwatch key={shade.name} color={shade} />
          ))}
        </div>
        {/* Logo Gradient Preview */}
        <div className="mt-6 pt-4 border-t border-slate-200">
          <h4 className="text-sm font-medium text-slate-700 mb-3">Logo-Gradient</h4>
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <span className="text-2xl font-bold text-white">B</span>
            </div>
            <div className="text-sm text-slate-600">
              <code className="bg-slate-100 px-2 py-1 rounded font-mono text-xs">
                bg-gradient-to-br from-primary-500 to-accent-500
              </code>
              <p className="mt-1 text-slate-500">Sky Blue (#0ea5e9) → Fuchsia (#d946ef)</p>
            </div>
          </div>
        </div>
      </div>

      {/* Category Colors */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Farben</h3>
        <p className="text-sm text-slate-500 mb-6">
          Jede Kategorie hat eine eigene Farbe fuer Navigation, Module und Akzente.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {CATEGORY_COLORS.map((cat) => (
            <div key={cat.id} className="border border-slate-200 rounded-xl p-4">
              <div className="flex items-center gap-3 mb-3">
                <div
                  className="w-8 h-8 rounded-lg"
                  style={{ backgroundColor: cat.main }}
                />
                <div>
                  <h4 className="font-medium text-slate-900">{cat.name}</h4>
                  <p className="text-xs text-slate-500">{cat.description}</p>
                </div>
              </div>
              <div className="flex gap-2">
                {cat.shades.map((shade) => (
                  <ColorSwatch key={shade.name} color={shade} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Semantic Colors */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Semantische Farben</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {Object.entries(SEMANTIC_COLORS).map(([key, palette]) => (
            <div key={key} className="border border-slate-200 rounded-xl p-4">
              <h4 className="font-medium text-slate-900 mb-3">{palette.name}</h4>
              <div className="flex gap-2">
                {palette.shades.map((shade) => (
                  <ColorSwatch key={shade.name} color={shade} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Usage Guidelines */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Verwendungsrichtlinien</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-slate-700 mb-2">Primary (Sky Blue)</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- Primaere Buttons und CTAs</li>
              <li>- Links und interaktive Elemente</li>
              <li>- Fokuszustaende</li>
              <li>- Ausgewaehlte Navigation</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium text-slate-700 mb-2">Kategorie-Farben</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- Sidebar-Navigation Icons</li>
              <li>- Modul-Cards und Badges</li>
              <li>- Bereichs-spezifische Akzente</li>
              <li>- Breadcrumbs und Headers</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
