'use client';

import type { StarboardConfigDashboard } from '@nexumi/shared';
import { useId } from 'react';
import { FieldAnchor } from '@/components/layout/field-anchor';
import { useTranslations } from '@/components/locale-provider';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import type { SettingsSaveResult } from '@/components/settings/settings-form';
import { SettingsForm } from '@/components/settings/settings-form';

async function saveStarboard(
  guildId: string,
  value: StarboardConfigDashboard,
  t: (key: string) => string
): Promise<SettingsSaveResult> {
  if (value.enabled && !value.channelId) {
    return { ok: false, error: t('modulePages.starboard.errors.channelRequired') };
  }
  if (value.threshold < 1 || value.threshold > 100) {
    return { ok: false, error: t('modulePages.starboard.errors.thresholdRange') };
  }

  try {
    const response = await fetch(`/api/guilds/${guildId}/starboard`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(value)
    });
    if (!response.ok) {
      const body = (await response.json().catch(() => null)) as { error?: string } | null;
      return { ok: false, error: body?.error ?? `Request failed with status ${response.status}` };
    }
    return { ok: true };
  } catch {
    return { ok: false, error: 'Network error' };
  }
}

interface StarboardFormProps {
  guildId: string;
  initialValue: StarboardConfigDashboard;
}

export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
  const t = useTranslations();
  const emojiId = useId();
  const thresholdId = useId();

  return (
    <SettingsForm<StarboardConfigDashboard>
      initialValue={initialValue}
      onSave={(value) => saveStarboard(guildId, value, t)}
    >
      {({ value, setValue }) => (
        <Card>
          <CardHeader>
            <CardTitle>{t('modulePages.starboard.title')}</CardTitle>
            <CardDescription>{t('modulePages.starboard.description')}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <FieldAnchor id="field-starboard-enabled">
              <div className="flex items-center justify-between rounded-md border border-border p-4">
                <div className="space-y-0.5 pr-4">
                  <Label>{t('modulePages.starboard.enabledLabel')}</Label>
                  <p className="text-xs text-muted-foreground">{t('modulePages.starboard.enabledHint')}</p>
                </div>
                <Switch
                  checked={value.enabled}
                  onCheckedChange={(enabled) => setValue((prev) => ({ ...prev, enabled }))}
                />
              </div>
            </FieldAnchor>
            <div className="grid gap-4 sm:grid-cols-3">
              <FieldAnchor id="field-starboard-channel">
                <div className="space-y-2">
                  <Label>{t('modulePages.starboard.channelId')}</Label>
                  <DiscordChannelSelect
                    guildId={guildId}
                    value={value.channelId}
                    onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
                  />
                </div>
              </FieldAnchor>
              <FieldAnchor id="field-starboard-emoji">
                <div className="space-y-2">
                  <Label htmlFor={emojiId}>{t('modulePages.starboard.emoji')}</Label>
                  <Input
                    id={emojiId}
                    value={value.emoji}
                    maxLength={80}
                    onChange={(event) =>
                      setValue((prev) => ({ ...prev, emoji: event.target.value }))
                    }
                    placeholder="⭐ or <:name:id>"
                  />
                  <p className="text-xs text-muted-foreground">{t('modulePages.starboard.emojiHint')}</p>
                </div>
              </FieldAnchor>
              <FieldAnchor id="field-starboard-threshold">
                <div className="space-y-2">
                  <Label htmlFor={thresholdId}>{t('modulePages.starboard.threshold')}</Label>
                  <Input
                    id={thresholdId}
                    type="number"
                    min={1}
                    max={100}
                    value={value.threshold}
                    onChange={(event) =>
                      setValue((prev) => ({
                        ...prev,
                        threshold: Number(event.target.value) || 1
                      }))
                    }
                  />
                </div>
              </FieldAnchor>
            </div>
            <FieldAnchor id="field-starboard-self">
              <div className="flex items-center justify-between rounded-md border border-border p-4">
                <Label>{t('modulePages.starboard.allowSelfStar')}</Label>
                <Switch
                  checked={value.allowSelfStar}
                  onCheckedChange={(allowSelfStar) =>
                    setValue((prev) => ({ ...prev, allowSelfStar }))
                  }
                />
              </div>
            </FieldAnchor>
            <FieldAnchor id="field-starboard-ignored">
              <div className="space-y-2">
                <Label>{t('modulePages.starboard.ignoredChannelIds')}</Label>
                <DiscordChannelMultiSelect
                  guildId={guildId}
                  value={value.ignoredChannelIds}
                  onChange={(ignoredChannelIds) =>
                    setValue((prev) => ({ ...prev, ignoredChannelIds }))
                  }
                />
                <p className="text-xs text-muted-foreground">{t('modulePages.starboard.nsfwHint')}</p>
              </div>
            </FieldAnchor>
          </CardContent>
        </Card>
      )}
    </SettingsForm>
  );
}
