import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Slider } from "@/components/ui/slider";
import { CHANNELS, type ChannelId } from "@/lib/campaign-data";
import { Sparkles, Image as ImageIcon, Play } from "lucide-react";

interface Props {
  channelId: ChannelId;
  content: Record<string, string>;
  onContentChange: (key: string, value: string) => void;
}

export function ChannelConfig({ channelId, content, onContentChange }: Props) {
  const meta = CHANNELS.find((c) => c.id === channelId)!;
  const Icon = meta.icon;

  return (
    <Card className="border-primary/20">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm flex items-center gap-2">
            <span
              className={`h-7 w-7 grid place-items-center rounded-md bg-gradient-to-br ${meta.accent}`}
            >
              <Icon className="h-3.5 w-3.5" />
            </span>
            {meta.name} configuration
          </CardTitle>
          <Badge variant="secondary" className="text-[10px]">
            ₦{meta.costPerMessage.toFixed(2)}/{meta.unit}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {channelId === "sms" && <SmsConfig content={content} onChange={onContentChange} />}
        {channelId === "whatsapp" && (
          <WhatsAppConfig content={content} onChange={onContentChange} />
        )}
        {channelId === "voice" && <VoiceConfig content={content} onChange={onContentChange} />}
        {channelId === "facebook" && (
          <FacebookConfig content={content} onChange={onContentChange} />
        )}
        {channelId === "google" && <GoogleConfig content={content} onChange={onContentChange} />}
      </CardContent>
    </Card>
  );
}

type SubProps = { content: Record<string, string>; onChange: (k: string, v: string) => void };

function SmsConfig({ content, onChange }: SubProps) {
  const body = content.sms_body ?? "";
  return (
    <>
      <div>
        <Label className="text-xs">Sender ID</Label>
        <Input
          value={content.sms_sender ?? "VOTERS"}
          onChange={(e) => onChange("sms_sender", e.target.value)}
          maxLength={11}
          className="mt-1"
        />
      </div>
      <div>
        <div className="flex items-center justify-between mb-1">
          <Label className="text-xs">Message body</Label>
          <span className="text-[10px] text-muted-foreground">
            {body.length}/160 · {Math.ceil(body.length / 160) || 1} segment(s)
          </span>
        </div>
        <Textarea
          value={body}
          onChange={(e) => onChange("sms_body", e.target.value)}
          placeholder="Dear {{first_name}}, vote {{candidate}} on Saturday. Your PU: {{ward}}."
          rows={4}
        />
        <AiHint label="Suggest GOTV copy" />
      </div>
    </>
  );
}

function WhatsAppConfig({ content, onChange }: SubProps) {
  return (
    <>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label className="text-xs">Template</Label>
          <Select
            value={content.wa_template ?? "manifesto_intro"}
            onValueChange={(v) => onChange("wa_template", v)}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="manifesto_intro">manifesto_intro (approved)</SelectItem>
              <SelectItem value="event_rsvp">event_rsvp (approved)</SelectItem>
              <SelectItem value="gotv_reminder">gotv_reminder (approved)</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="text-xs">Language</Label>
          <Select value={content.wa_lang ?? "en"} onValueChange={(v) => onChange("wa_lang", v)}>
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="en">English</SelectItem>
              <SelectItem value="ha">Hausa</SelectItem>
              <SelectItem value="yo">Yoruba</SelectItem>
              <SelectItem value="ig">Igbo</SelectItem>
              <SelectItem value="pcm">Pidgin</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
      <div>
        <Label className="text-xs">Header media</Label>
        <div className="mt-1 flex items-center gap-2 rounded-md border border-dashed p-3 text-xs text-muted-foreground">
          <ImageIcon className="h-4 w-4" /> Manifesto-hero-1080.jpg · 412 KB
        </div>
      </div>
      <div>
        <Label className="text-xs">Body</Label>
        <Textarea
          value={content.wa_body ?? ""}
          onChange={(e) => onChange("wa_body", e.target.value)}
          placeholder="Hello {{1}}, we're launching our manifesto in {{2}}."
          rows={3}
        />
      </div>
      <div>
        <Label className="text-xs">Quick reply buttons</Label>
        <Input
          value={content.wa_ctas ?? "Read manifesto, RSVP, Unsubscribe"}
          onChange={(e) => onChange("wa_ctas", e.target.value)}
          className="mt-1"
        />
      </div>
    </>
  );
}

function VoiceConfig({ content, onChange }: SubProps) {
  return (
    <>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label className="text-xs">Voice mode</Label>
          <Select
            value={content.voice_mode ?? "ai"}
            onValueChange={(v) => onChange("voice_mode", v)}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ai">AI narrated (synthesized)</SelectItem>
              <SelectItem value="upload">Pre-recorded upload</SelectItem>
              <SelectItem value="ivr">IVR with key-press</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="text-xs">Voice persona</Label>
          <Select
            value={content.voice_persona ?? "amara"}
            onValueChange={(v) => onChange("voice_persona", v)}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="amara">Amara · Female · Yoruba accent</SelectItem>
              <SelectItem value="ibrahim">Ibrahim · Male · Hausa accent</SelectItem>
              <SelectItem value="emeka">Emeka · Male · Igbo accent</SelectItem>
              <SelectItem value="custom">Candidate clone (upload sample)</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
      <div>
        <Label className="text-xs">Script (max 60 seconds)</Label>
        <Textarea
          value={content.voice_script ?? ""}
          onChange={(e) => onChange("voice_script", e.target.value)}
          placeholder="Hello, this is a message from..."
          rows={4}
        />
        <AiHint label="Generate compliant script" />
      </div>
      <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2 text-xs">
        <button
          type="button"
          className="h-7 w-7 grid place-items-center rounded-full bg-primary text-primary-foreground"
        >
          <Play className="h-3 w-3" />
        </button>
        <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
          <div className="h-full w-[34%] bg-primary" />
        </div>
        <span className="text-[10px] text-muted-foreground tabular-nums">0:14 / 0:42</span>
      </div>
    </>
  );
}

function FacebookConfig({ content, onChange }: SubProps) {
  return (
    <>
      <div>
        <Label className="text-xs">Ad headline</Label>
        <Input
          value={content.fb_headline ?? ""}
          onChange={(e) => onChange("fb_headline", e.target.value)}
          maxLength={40}
          className="mt-1"
          placeholder="Choose progress. Vote on Feb 25."
        />
      </div>
      <div>
        <Label className="text-xs">Primary text</Label>
        <Textarea
          value={content.fb_body ?? ""}
          onChange={(e) => onChange("fb_body", e.target.value)}
          rows={3}
        />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label className="text-xs">Placement</Label>
          <Select
            value={content.fb_placement ?? "feed_stories"}
            onValueChange={(v) => onChange("fb_placement", v)}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="feed_stories">Feed + Stories</SelectItem>
              <SelectItem value="reels">Reels only</SelectItem>
              <SelectItem value="audience_network">Audience Network</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="text-xs">Daily budget cap</Label>
          <Input
            type="number"
            value={content.fb_budget ?? "150000"}
            onChange={(e) => onChange("fb_budget", e.target.value)}
            className="mt-1"
          />
        </div>
      </div>
    </>
  );
}

function GoogleConfig({ content, onChange }: SubProps) {
  const bid = Number(content.g_bid ?? "85");
  return (
    <>
      <div>
        <Label className="text-xs">Headlines (3, comma-separated)</Label>
        <Input
          value={content.g_headlines ?? "Vote for change, Manifesto 2027, Join the movement"}
          onChange={(e) => onChange("g_headlines", e.target.value)}
          className="mt-1"
        />
      </div>
      <div>
        <Label className="text-xs">Description</Label>
        <Textarea
          value={content.g_desc ?? ""}
          onChange={(e) => onChange("g_desc", e.target.value)}
          rows={2}
          maxLength={90}
        />
      </div>
      <div>
        <Label className="text-xs">Keywords</Label>
        <Input
          value={content.g_keywords ?? "vote 2027, INEC, manifesto, town hall"}
          onChange={(e) => onChange("g_keywords", e.target.value)}
          className="mt-1"
        />
      </div>
      <div>
        <div className="flex items-center justify-between mb-1">
          <Label className="text-xs">Max CPC bid (NGN)</Label>
          <span className="text-[10px] text-muted-foreground tabular-nums">₦{bid}</span>
        </div>
        <Slider
          value={[bid]}
          min={20}
          max={300}
          step={5}
          onValueChange={(v) => onChange("g_bid", String(v[0]))}
        />
      </div>
    </>
  );
}

function AiHint({ label }: { label: string }) {
  return (
    <button
      type="button"
      className="mt-1.5 inline-flex items-center gap-1 text-[10px] text-primary hover:underline"
    >
      <Sparkles className="h-3 w-3" /> {label}
    </button>
  );
}