import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export interface Language { code: string; label: string; }

interface SocialSchedulingPanelProps {
  showSocial: boolean;
  onToggleSocial: () => void;
  socialChannels: string[];
  selectedChannels: string[];
  onToggleChannel: (channel: string) => void;
  languages: Language[];
  selectedLangs: string[];
  editedContents: Record<string, string>;
  initialContents: Record<string, string>;
  activeLang: string;
  setActiveLang: (l: string) => void;
  setEditedContents: React.Dispatch<React.SetStateAction<Record<string, string>>>;
  scheduledTime: string;
  setScheduledTime: (v: string) => void;
  onPublish: () => void;
  canPublish: boolean;
}

const SocialSchedulingPanel: React.FC<SocialSchedulingPanelProps> = ({
  showSocial,
  onToggleSocial,
  socialChannels,
  selectedChannels,
  onToggleChannel,
  languages,
  selectedLangs,
  editedContents,
  initialContents,
  activeLang,
  setActiveLang,
  setEditedContents,
  scheduledTime,
  setScheduledTime,
  onPublish,
  canPublish,
}) => {
  return (
    <div className="w-full max-w-3xl mx-auto mt-4 space-y-4">
      <section className="rounded-lg border bg-muted/30 p-4">
        <label className="flex items-center gap-2 cursor-pointer select-none">
          <input
            type="checkbox"
            checked={showSocial}
            onChange={onToggleSocial}
            className="accent-primary"
          />
          Poste Social Media
        </label>
        <div className={`overflow-hidden transition-all duration-300 ${showSocial ? 'max-h-96 opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-sm font-medium mr-1">Kanäle:</span>
            {socialChannels.map((c) => (
              <Button
                key={c}
                variant={selectedChannels.includes(c) ? 'default' : 'outline'}
                size="sm"
                onClick={() => onToggleChannel(c)}
              >
                {c}
              </Button>
            ))}
          </div>
          <div className="flex flex-wrap items-center gap-2 mt-4">
            <span className="text-sm font-medium mr-1">Sprachen:</span>
            {languages.map((l) => (
              <label key={l.code} className="flex items-center gap-1 cursor-pointer select-none">
                <input
                  type="checkbox"
                  checked={Object.keys(editedContents).includes(l.code)}
                  disabled={!selectedLangs.includes(l.code)}
                  onChange={e => {
                    if (e.target.checked) {
                      setEditedContents(prev => ({
                        ...prev,
                        [l.code]: initialContents[l.code] || ''
                      }));
                      setActiveLang(l.code);
                    } else {
                      setEditedContents(prev => {
                        const copy: Record<string, string> = { ...prev };
                        delete copy[l.code];
                        if (activeLang === l.code) {
                          const next = Object.keys(copy)[0] || '';
                          setActiveLang(next);
                        }
                        return copy;
                      });
                    }
                  }}
                  className="accent-primary"
                />
                {l.label}
              </label>
            ))}
          </div>
        </div>
      </section>
      <section className="rounded-lg border bg-muted/30 p-4">
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <input
              type="radio"
              id="publishNow"
              name="publishOption"
              checked={!scheduledTime}
              onChange={() => setScheduledTime('')}
              className="h-4 w-4 text-primary focus:ring-primary"
            />
            <label htmlFor="publishNow" className="text-sm font-medium">
              Sofort veröffentlichen
            </label>
          </div>
          <div className="flex items-center gap-2">
            <input
              type="radio"
              id="schedulePublish"
              name="publishOption"
              checked={!!scheduledTime}
              onChange={() => setScheduledTime(new Date().toISOString().split('T')[0])}
              className="h-4 w-4 text-primary focus:ring-primary"
            />
            <label htmlFor="schedulePublish" className="text-sm font-medium">
              Senden planen
            </label>
          </div>
        </div>
        {scheduledTime && (
          <div className="flex items-center gap-2 mt-2">
            <Input
              type="date"
              value={scheduledTime.split('T')[0]}
              onChange={(e) => setScheduledTime(e.target.value)}
              className="flex-1"
            />
          </div>
        )}
      </section>
      <div className="flex justify-end">
        <Button onClick={onPublish} disabled={!canPublish}>Veröffentlichen</Button>
      </div>
    </div>
  );
};

export default SocialSchedulingPanel;
