'use client';

import { Image, Camera, Ruler } from 'lucide-react';
import { CompanySettings } from '../page';

interface BrandingSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
}

export default function BrandingSettings({ settings, setSettings }: BrandingSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <h3 className="text-lg font-semibold text-slate-800">Branding & Design</h3>

      <div className="grid lg:grid-cols-2 gap-6">
        <div>
          <label className="text-sm text-slate-600">Company Logo</label>
          <div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
            <Image className="w-12 h-12 mx-auto text-slate-400" />
            <p className="text-sm text-slate-500 mt-2">Upload Logo (PNG, SVG)</p>
            <p className="text-xs text-slate-400">Recommended: 200x50px</p>
          </div>
        </div>
        <div>
          <label className="text-sm text-slate-600">Favicon</label>
          <div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
            <Camera className="w-12 h-12 mx-auto text-slate-400" />
            <p className="text-sm text-slate-500 mt-2">Upload Favicon</p>
            <p className="text-xs text-slate-400">Recommended: 32x32px</p>
          </div>
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-6 pt-4">
        <div>
          <label className="text-sm text-slate-600">Primary Color</label>
          <div className="flex items-center gap-3 mt-2">
            <input
              type="color"
              value={settings.primaryColor}
              onChange={(e) => setSettings({ ...settings, primaryColor: e.target.value })}
              className="w-12 h-12 rounded-lg cursor-pointer border-0"
            />
            <input
              type="text"
              value={settings.primaryColor}
              onChange={(e) => setSettings({ ...settings, primaryColor: e.target.value })}
              className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            />
          </div>
        </div>
        <div>
          <label className="text-sm text-slate-600">Secondary Color</label>
          <div className="flex items-center gap-3 mt-2">
            <input
              type="color"
              value={settings.secondaryColor}
              onChange={(e) => setSettings({ ...settings, secondaryColor: e.target.value })}
              className="w-12 h-12 rounded-lg cursor-pointer border-0"
            />
            <input
              type="text"
              value={settings.secondaryColor}
              onChange={(e) => setSettings({ ...settings, secondaryColor: e.target.value })}
              className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            />
          </div>
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Border Radius</label>
        <div className="flex items-center gap-4 mt-2">
          <Ruler className="w-5 h-5 text-slate-400" />
          <input
            type="range"
            min={0}
            max={20}
            value={settings.borderRadius}
            onChange={(e) => setSettings({ ...settings, borderRadius: parseInt(e.target.value) })}
            className="flex-1"
          />
          <span className="text-sm text-slate-600">{settings.borderRadius}px</span>
        </div>
        <div className="flex gap-2 mt-4">
          {[4, 8, 12, 16].map(radius => (
            <button
              key={radius}
              onClick={() => setSettings({ ...settings, borderRadius: radius })}
              className={`px-3 py-2 text-sm border ${settings.borderRadius === radius ? 'bg-accent text-white' : 'border-slate-200'}`}
              style={{ borderRadius: radius }}
            >
              {radius}px
            </button>
          ))}
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Preview</label>
        <div className="mt-2 p-6 bg-slate-100 rounded-lg flex items-center justify-center gap-4">
          <div
            className="px-4 py-2 text-white font-bold"
            style={{ backgroundColor: settings.primaryColor, borderRadius: settings.borderRadius }}
          >
            Primary
          </div>
          <div
            className="px-4 py-2 text-white font-bold"
            style={{ backgroundColor: settings.secondaryColor, borderRadius: settings.borderRadius }}
          >
            Secondary
          </div>
        </div>
      </div>
    </div>
  );
}
