import { useState } from 'react'
import { Button } from '../ui/Button.tsx'
import type { Ticket, TicketType } from '../../lib/types.ts'

const SUBJECT_MAX = 128
const DESCRIPTION_MAX = 2000

function CharCount({ current, max }: { current: number; max: number }) {
  const remaining = max - current
  const isWarning = remaining <= max * 0.1  // warn in the last 10%
  const isOver = remaining < 0
  return (
    <span className={`text-xs tabular-nums ${isOver ? 'text-red-400' : isWarning ? 'text-amber-400' : 'text-fg-300'}`}>
      {current}/{max}
    </span>
  )
}

// ─── Fake transactions ────────────────────────────────────────────────────────

export interface FakeTransaction {
  id: string
  label: string
  amount: string
  date: string
}

export const FAKE_TRANSACTIONS: FakeTransaction[] = [
  { id: 'TXN-48291', label: 'Pro Plan — Monthly', amount: '$12.00', date: 'Mar 1, 2026' },
  { id: 'TXN-47103', label: 'Add-on: Extra Storage', amount: '$4.99', date: 'Feb 15, 2026' },
  { id: 'TXN-45882', label: 'Pro Plan — Monthly', amount: '$12.00', date: 'Feb 1, 2026' },
]

// ─── Step definitions ─────────────────────────────────────────────────────────

interface Option {
  label: string
  description: string
  icon: string
  type: TicketType
  subOptions?: SubOption[]
}

interface SubOption {
  label: string
  description: string
  icon: string
  type: TicketType
}

const CATEGORIES: Option[] = [
  {
    label: 'Something broke',
    description: 'Unexpected behavior or errors',
    icon: '⚠️',
    type: 'bug',
    subOptions: [
      { label: 'Page or feature not loading', description: 'Blank screens, crashes, or freezes', icon: '🖥️', type: 'bug' },
      { label: 'Error message appeared', description: 'Something went wrong unexpectedly', icon: '🔴', type: 'bug' },
      { label: 'Data looks wrong', description: 'Missing or incorrect information', icon: '📊', type: 'bug' },
    ],
  },
  {
    label: 'Billing or payment',
    description: 'Charges, invoices, or subscriptions',
    icon: '💳',
    type: 'billing',
    subOptions: [
      { label: 'Unexpected charge', description: "A charge I didn't expect or recognise", icon: '❓', type: 'billing' },
      { label: 'Refund request', description: "I'd like money returned", icon: '↩️', type: 'billing' },
      { label: 'Subscription issue', description: 'Plan, renewal, or upgrade problem', icon: '🔄', type: 'billing' },
    ],
  },
  {
    label: 'My account',
    description: 'Login, settings, or profile',
    icon: '👤',
    type: 'account',
    subOptions: [
      { label: "Can't sign in", description: 'Login or password issues', icon: '🔐', type: 'account' },
      { label: 'Profile or settings', description: 'Change name, email, or preferences', icon: '⚙️', type: 'account' },
      { label: 'Account access or security', description: 'Suspicious activity or locked out', icon: '🛡️', type: 'account' },
    ],
  },
  {
    label: 'Suggest an idea',
    description: 'Feature requests or improvements',
    icon: '💡',
    type: 'feature-request',
    subOptions: [
      { label: 'New feature idea', description: "Something you'd love to see added", icon: '✨', type: 'feature-request' },
      { label: 'Improve something existing', description: 'Make a current feature better', icon: '🔧', type: 'feature-request' },
      { label: 'Share general feedback', description: 'Thoughts on your experience', icon: '💬', type: 'feedback' },
    ],
  },
  {
    label: 'Something else',
    description: 'Anything not listed above',
    icon: '📝',
    type: 'other',
  },
]

// ─── Sub-components ────────────────────────────────────────────────────────────

function StepIndicator({ step, total }: { step: number; total: number }) {
  return (
    <div className="flex items-center gap-1.5 mb-5">
      {Array.from({ length: total }).map((_, i) => (
        <div
          key={i}
          style={{ transition: 'background-color 0.4s ease' }}
          className={`h-0.5 flex-1 rounded-full ${i < step ? 'bg-fg-100' : i === step ? 'bg-fg-300' : 'bg-border-100'
            }`}
        />
      ))}
    </div>
  )
}

interface OptionCardProps {
  icon: string
  label: string
  description: string
  onClick: () => void
}

function OptionCard({ icon, label, description, onClick }: OptionCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="group w-full text-left rounded-lg border border-border-100 bg-bg-200 px-4 py-3.5 transition-all duration-150 cursor-pointer hover:border-border-200 hover:bg-bg-300 flex items-start gap-3"
    >
      <span className="mt-0.5 text-lg leading-none select-none">{icon}</span>
      <div className="flex flex-col gap-0.5 min-w-0">
        <span className="text-sm font-medium text-fg-100">{label}</span>
        <span className="text-xs text-fg-300 leading-relaxed">{description}</span>
      </div>
      <svg
        className="ml-auto mt-1 shrink-0 text-fg-300 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
        width="14" height="14" viewBox="0 0 14 14" fill="none"
      >
        <path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  )
}

// ─── Main form ────────────────────────────────────────────────────────────────

type FormData = Pick<Ticket, 'subject' | 'description' | 'type'>

interface NewTicketFormProps {
  onSubmit: (data: FormData) => void
}

type Step = 'category' | 'sub' | 'details'

const inputClass = `
  w-full rounded-md border border-border-100 bg-bg-300 px-3 py-2 text-sm text-fg-100
  placeholder:text-fg-300 outline-none transition-colors
  focus:border-border-200 focus:ring-1 focus:ring-ring-100
`

export function NewTicketForm({ onSubmit }: NewTicketFormProps) {
  const [step, setStep] = useState<Step>('category')
  const [selectedCategory, setSelectedCategory] = useState<Option | null>(null)
  const [selectedTxn, setSelectedTxn] = useState<string>('')
  const [form, setForm] = useState<FormData>({ subject: '', description: '', type: 'other' })

  const isBilling = form.type === 'billing'
  const stepIndex = step === 'category' ? 0 : step === 'sub' ? 1 : selectedCategory?.subOptions ? 2 : 1
  const totalSteps = selectedCategory?.subOptions ? 3 : 2

  const handleCategorySelect = (cat: Option) => {
    setSelectedCategory(cat)
    if (cat.subOptions) {
      setStep('sub')
    } else {
      setForm(f => ({ ...f, type: cat.type }))
      setStep('details')
    }
  }

  const handleSubSelect = (sub: SubOption) => {
    setForm(f => ({ ...f, type: sub.type }))
    setStep('details')
  }

  const handleBack = () => {
    if (step === 'details' && selectedCategory?.subOptions) {
      setSelectedTxn('')
      setStep('sub')
    } else {
      setSelectedTxn('')
      setStep('category')
      setSelectedCategory(null)
    }
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!form.subject.trim()) return
    // Encode transaction reference into description if one was selected
    const txn = FAKE_TRANSACTIONS.find(t => t.id === selectedTxn)
    const descriptionWithTxn = txn
      ? `[Transaction: ${txn.id} — ${txn.label} ${txn.amount} on ${txn.date}]\n\n${form.description}`.trim()
      : form.description
    onSubmit({ ...form, description: descriptionWithTxn })
  }

  return (
    <div className="flex flex-col">
      <StepIndicator step={stepIndex} total={totalSteps} />

      {/* Step 1 — Category */}
      {step === 'category' && (
        <div className="flex flex-col gap-2">
          <div className="mb-3">
            <p className="text-sm font-semibold text-fg-100">What can we help you with?</p>
            <p className="text-xs text-fg-300 mt-0.5">Choose the option that best fits your situation.</p>
          </div>
          {CATEGORIES.map(cat => (
            <OptionCard
              key={cat.type}
              icon={cat.icon}
              label={cat.label}
              description={cat.description}
              onClick={() => handleCategorySelect(cat)}
            />
          ))}
        </div>
      )}

      {/* Step 2 — Sub-options */}
      {step === 'sub' && selectedCategory?.subOptions && (
        <div className="flex flex-col gap-2">
          <div className="mb-3">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-base">{selectedCategory.icon}</span>
              <span className="text-xs font-medium text-fg-300">{selectedCategory.label}</span>
            </div>
            <p className="text-sm font-semibold text-fg-100">What's the issue specifically?</p>
            <p className="text-xs text-fg-300 mt-0.5">Pick the closest match — we'll route it to the right team.</p>
          </div>
          {selectedCategory.subOptions.map(sub => (
            <OptionCard
              key={sub.type + sub.label}
              icon={sub.icon}
              label={sub.label}
              description={sub.description}
              onClick={() => handleSubSelect(sub)}
            />
          ))}
          <button
            type="button"
            onClick={handleBack}
            className="mt-1 text-xs text-fg-300 hover:text-fg-200 transition-colors text-left cursor-pointer"
          >
            ← Back
          </button>
        </div>
      )}

      {/* Step 3 — Details */}
      {step === 'details' && (
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <div className="mb-1">
            {selectedCategory && (
              <div className="flex items-center gap-2 mb-2">
                <span className="text-base">{selectedCategory.icon}</span>
                <span className="text-xs font-medium text-fg-300">{selectedCategory.label}</span>
                <span className="text-xs text-fg-300">·</span>
                <span className="inline-flex items-center rounded-full border border-border-100 bg-bg-300 px-2 py-0.5 text-xs text-fg-300 capitalize">
                  {form.type.replace('-', ' ')}
                </span>
              </div>
            )}
            <p className="text-sm font-semibold text-fg-100">Tell us what's going on</p>
            <p className="text-xs text-fg-300 mt-0.5">The more detail you share, the faster we can help.</p>
          </div>

          <div className="flex flex-col gap-1.5">
            <div className="flex items-center justify-between">
              <label className="text-xs font-medium text-fg-200">
                Subject <span className="text-fg-300 font-normal">(required)</span>
              </label>
              <CharCount current={form.subject.length} max={SUBJECT_MAX} />
            </div>
            <input
              className={inputClass}
              placeholder="Brief summary of the issue"
              value={form.subject}
              onChange={e => setForm(f => ({ ...f, subject: e.target.value }))}
              maxLength={SUBJECT_MAX}
              autoFocus
              required
            />
          </div>

          {isBilling && (
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-medium text-fg-200">
                Related transaction <span className="text-fg-300 font-normal">(optional)</span>
              </label>
              <div className="relative">
                <select
                  className={`${inputClass} appearance-none pr-8 cursor-pointer`}
                  value={selectedTxn}
                  onChange={e => setSelectedTxn(e.target.value)}
                >
                  <option value="">— Not related to a specific charge</option>
                  {FAKE_TRANSACTIONS.map(txn => (
                    <option key={txn.id} value={txn.id}>
                      {txn.id} · {txn.label} · {txn.amount} · {txn.date}
                    </option>
                  ))}
                </select>
                <svg
                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-fg-300"
                  width="12" height="12" viewBox="0 0 12 12" fill="none"
                >
                  <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              {selectedTxn && (() => {
                const txn = FAKE_TRANSACTIONS.find(t => t.id === selectedTxn)!
                return (
                  <div className="rounded-md border border-border-100 bg-bg-300 px-3 py-2.5 flex items-center justify-between gap-3">
                    <div className="flex flex-col gap-0.5">
                      <span className="text-xs font-medium text-fg-100">{txn.label}</span>
                      <span className="text-xs text-fg-300">{txn.date}</span>
                    </div>
                    <span className="text-sm font-semibold text-fg-100 shrink-0">{txn.amount}</span>
                  </div>
                )
              })()}
            </div>
          )}

          <div className="flex flex-col gap-1.5">
            <div className="flex items-center justify-between">
              <label className="text-xs font-medium text-fg-200">
                Description <span className="text-fg-300 font-normal">(optional)</span>
              </label>
              <CharCount current={form.description.length} max={DESCRIPTION_MAX} />
            </div>
            <textarea
              className={`${inputClass} min-h-24 resize-y`}
              placeholder="Describe what happened, what you expected, and any steps to reproduce..."
              value={form.description}
              onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
              maxLength={DESCRIPTION_MAX}
              rows={4}
            />
          </div>

          <div className="flex items-center justify-between pt-1">
            <button
              type="button"
              onClick={handleBack}
              className="text-xs text-fg-300 hover:text-fg-200 transition-colors cursor-pointer"
            >
              ← Back
            </button>
            <Button type="submit" disabled={!form.subject.trim()}>
              Submit Ticket
            </Button>
          </div>
        </form>
      )}
    </div>
  )
}