"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { FeedbackBanner } from "@/components/common/feedback/FeedbackBanner";
import { PageState } from "@/components/common/feedback/PageState";
import { FieldMessage } from "@/components/common/feedback/FieldMessage";
import { useConfirm } from "@/components/common/feedback/ConfirmProvider";
import { useTranslation } from "@/hooks/useTranslation";
import { typography } from "@/styles/theme";

export default function SystemFeedbackPreviewPage() {
  const { t } = useTranslation();
  const confirm = useConfirm();

  return (
    <div className="px-8 py-10 space-y-8">
      <div className="space-y-2">
        <h1 className={typography.h2}>{t.common.previewSystemTitle}</h1>
        <p className={typography.bodySecondary}>{t.common.previewSystemDesc}</p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <section className="rounded-lg border border-[#e5e6eb] bg-white p-6 shadow-sm">
          <div className="space-y-1">
            <h2 className={typography.h3}>{t.common.previewConfirmSection}</h2>
            <p className={typography.bodySecondary}>{t.common.previewConfirmHint}</p>
          </div>
          <div className="mt-4 flex flex-wrap gap-3">
            <Button
              className="bg-[#f53f3f] text-white hover:bg-[#d83232]"
              onClick={() =>
                confirm({
                  title: t.common.previewConfirmDangerTitle,
                  description: t.common.previewConfirmDangerDesc,
                  confirmText: t.common.previewConfirmDangerAction,
                  variant: "danger",
                })
              }
            >
              {t.common.previewConfirmDangerOpen}
            </Button>
            <Button
              className="bg-[#3370ff] text-white hover:bg-[#1e5eff]"
              onClick={() =>
                confirm({
                  title: t.common.previewConfirmPrimaryTitle,
                  description: t.common.previewConfirmPrimaryDesc,
                  confirmText: t.common.previewConfirmPrimaryAction,
                  variant: "primary",
                })
              }
            >
              {t.common.previewConfirmPrimaryOpen}
            </Button>
          </div>
        </section>

        <section className="rounded-lg border border-[#e5e6eb] bg-white p-6 shadow-sm">
          <div className="space-y-1">
            <h2 className={typography.h3}>{t.common.previewBannerSection}</h2>
            <p className={typography.bodySecondary}>{t.common.previewBannerHint}</p>
          </div>
          <div className="mt-4 space-y-3">
            <FeedbackBanner
              variant="warning"
              title={t.common.previewBannerMaintenanceTitle}
              description={t.common.previewBannerMaintenanceDesc}
            />
            <FeedbackBanner
              variant="info"
              title={t.common.previewBannerNoticeTitle}
              description={t.common.previewBannerNoticeDesc}
            />
          </div>
        </section>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <section className="rounded-lg border border-[#e5e6eb] bg-white p-6 shadow-sm">
          <div className="space-y-1">
            <h2 className={typography.h3}>{t.common.previewPageStateSection}</h2>
            <p className={typography.bodySecondary}>{t.common.previewPageStateHint}</p>
          </div>
          <div className="mt-4 space-y-4">
            <PageState
              variant="error"
              title={t.common.previewPageErrorTitle}
              description={t.common.previewPageErrorDesc}
            />
            <PageState
              variant="empty"
              title={t.common.previewPageEmptyTitle}
              description={t.common.previewPageEmptyDesc}
            />
          </div>
        </section>

        <section className="rounded-lg border border-[#e5e6eb] bg-white p-6 shadow-sm">
          <div className="space-y-1">
            <h2 className={typography.h3}>{t.common.previewValidationSection}</h2>
            <p className={typography.bodySecondary}>{t.common.previewValidationHint}</p>
          </div>
          <div className="mt-4 space-y-4">
            <div>
              <label className="text-sm font-medium text-[#1f2329]">
                {t.common.previewValidationFieldError}
              </label>
              <Input
                className="mt-2 border-[#f53f3f] focus:ring-[#f53f3f]/20"
                placeholder={t.common.previewValidationPlaceholder}
              />
              <FieldMessage
                variant="error"
                message={t.common.previewValidationErrorText}
              />
            </div>
            <div>
              <label className="text-sm font-medium text-[#1f2329]">
                {t.common.previewValidationFieldWarning}
              </label>
              <Input
                className="mt-2 border-[#ff7d00] focus:ring-[#ff7d00]/20"
                placeholder={t.common.previewValidationPlaceholder}
              />
              <FieldMessage
                variant="warning"
                message={t.common.previewValidationWarningText}
              />
            </div>
            <div>
              <label className="text-sm font-medium text-[#1f2329]">
                {t.common.previewValidationFieldSuccess}
              </label>
              <Input
                className="mt-2 border-[#00b42a] focus:ring-[#00b42a]/20"
                placeholder={t.common.previewValidationPlaceholder}
              />
              <FieldMessage
                variant="success"
                message={t.common.previewValidationSuccessText}
              />
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}