"use client";

import { InfoScreenConfig } from "./InfoScreenConfig";
import { DateScreenConfig } from "./DateScreenConfig";
import { CouponScreenConfig } from "./CouponScreenConfig";
import { FormScreenConfig } from "./FormScreenConfig";
import { TextScreenConfig } from "./TextScreenConfig";

import type { BuilderScreen } from "@/lib/admin/builder/types";
import type { ScreenDefinition, InfoScreenDefinition, DateScreenDefinition, CouponScreenDefinition, FormScreenDefinition, TextScreenDefinition } from "@/lib/funnel/types";

interface TemplateConfigProps {
  screen: BuilderScreen;
  onUpdate: (updates: Partial<ScreenDefinition>) => void;
}

export function TemplateConfig({ screen, onUpdate }: TemplateConfigProps) {
  const { template } = screen;

  switch (template) {
    case "info":
      return (
        <InfoScreenConfig 
          screen={screen as BuilderScreen & { template: "info" }}
          onUpdate={onUpdate as (updates: Partial<InfoScreenDefinition>) => void}
        />
      );
      
    case "date":
      return (
        <DateScreenConfig 
          screen={screen as BuilderScreen & { template: "date" }}
          onUpdate={onUpdate as (updates: Partial<DateScreenDefinition>) => void}
        />
      );
      
    case "coupon":
      return (
        <CouponScreenConfig 
          screen={screen as BuilderScreen & { template: "coupon" }}
          onUpdate={onUpdate as (updates: Partial<CouponScreenDefinition>) => void}
        />
      );
      
    case "form":
      return (
        <FormScreenConfig 
          screen={screen as BuilderScreen & { template: "form" }}
          onUpdate={onUpdate as (updates: Partial<FormScreenDefinition>) => void}
        />
      );
      
    case "text":
      return (
        <TextScreenConfig 
          screen={screen as BuilderScreen & { template: "text" }}
          onUpdate={onUpdate as (updates: Partial<TextScreenDefinition>) => void}
        />
      );
      
    case "list":
      return (
        <div className="space-y-4">
          <div className="text-sm text-muted-foreground">
            List template configuration is available in the existing sidebar.
            This is a legacy template that will be updated soon.
          </div>
        </div>
      );
      
    default:
      return (
        <div className="space-y-4">
          <div className="text-sm text-red-600">
            Unknown template type: {template}
          </div>
        </div>
      );
  }
}