import * as React from "react";
import { type FormState as _FormState } from "./types";
import {
  PRICING as LOGIC_PRICING,
  PAGE_SAMPLES as LOGIC_PAGE_SAMPLES,
  FEATURE_OPTIONS as LOGIC_FEATURE_OPTIONS,
  FUNCTION_OPTIONS as LOGIC_FUNCTION_OPTIONS,
  API_OPTIONS as LOGIC_API_OPTIONS,
  ASSET_OPTIONS as LOGIC_ASSET_OPTIONS,
  EMPLOYEE_OPTIONS as LOGIC_EMPLOYEE_OPTIONS,
  SOCIAL_MEDIA_OPTIONS as LOGIC_SOCIAL_MEDIA_OPTIONS,
  VIBE_LABELS as LOGIC_VIBE_LABELS,
  DEADLINE_LABELS as LOGIC_DEADLINE_LABELS,
  ASSET_LABELS as LOGIC_ASSET_LABELS,
  FEATURE_LABELS as LOGIC_FEATURE_LABELS,
  FUNCTION_LABELS as LOGIC_FUNCTION_LABELS,
  API_LABELS as LOGIC_API_LABELS,
  SOCIAL_LABELS as LOGIC_SOCIAL_LABELS,
  initialState as LOGIC_INITIAL_STATE,
  DESIGN_OPTIONS,
} from "../../logic/pricing";

export const PRICING = LOGIC_PRICING;
export const PAGE_SAMPLES = LOGIC_PAGE_SAMPLES;
export const FEATURE_OPTIONS = LOGIC_FEATURE_OPTIONS;
export const FUNCTION_OPTIONS = LOGIC_FUNCTION_OPTIONS;
export const API_OPTIONS = LOGIC_API_OPTIONS;
export const ASSET_OPTIONS = LOGIC_ASSET_OPTIONS;
export const EMPLOYEE_OPTIONS = LOGIC_EMPLOYEE_OPTIONS;
export const SOCIAL_MEDIA_OPTIONS = LOGIC_SOCIAL_MEDIA_OPTIONS;
export const VIBE_LABELS = LOGIC_VIBE_LABELS;
export const DEADLINE_LABELS = LOGIC_DEADLINE_LABELS;
export const ASSET_LABELS = LOGIC_ASSET_LABELS;
export const FEATURE_LABELS = LOGIC_FEATURE_LABELS;
export const FUNCTION_LABELS = LOGIC_FUNCTION_LABELS;
export const API_LABELS = LOGIC_API_LABELS;
export const SOCIAL_LABELS = LOGIC_SOCIAL_LABELS;
export const initialState = LOGIC_INITIAL_STATE;

const VIBE_ILLUSTRATIONS: Record<string, React.ReactNode> = {
  minimal: (
    <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
      <rect
        x="10"
        y="10"
        width="80"
        height="2"
        rx="1"
        className="fill-current"
      />
      <rect
        x="10"
        y="20"
        width="50"
        height="2"
        rx="1"
        className="fill-current"
      />
      <rect
        x="10"
        y="40"
        width="30"
        height="10"
        rx="1"
        className="fill-current"
      />
    </svg>
  ),
  bold: (
    <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
      <rect
        x="10"
        y="10"
        width="80"
        height="15"
        rx="2"
        className="fill-current"
      />
      <rect
        x="10"
        y="35"
        width="80"
        height="15"
        rx="2"
        className="fill-current"
      />
    </svg>
  ),
  nature: (
    <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
      <circle cx="30" cy="30" r="20" className="fill-current" />
      <circle cx="70" cy="30" r="15" className="fill-current" />
    </svg>
  ),
  tech: (
    <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
      <path
        d="M10 10 L90 10 L90 50 L10 50 Z"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
      />
      <path
        d="M10 30 L90 30"
        stroke="currentColor"
        strokeWidth="1"
        strokeDasharray="4 2"
      />
      <path
        d="M50 10 L50 50"
        stroke="currentColor"
        strokeWidth="1"
        strokeDasharray="4 2"
      />
    </svg>
  ),
};

export const DESIGN_VIBES = DESIGN_OPTIONS.map((opt) => ({
  ...opt,
  illustration: VIBE_ILLUSTRATIONS[opt.id],
}));